106 lines
3.9 KiB
JavaScript
106 lines
3.9 KiB
JavaScript
|
/*
|
||
|
|
* Author: 黎永顺
|
||
|
|
* name: 表头字段添加
|
||
|
|
* Description:
|
||
|
|
* Date: 2023/5/17
|
||
|
|
*/
|
||
|
|
import React, { Component } from "react";
|
||
|
|
import { Button, Col, Row } from "antd";
|
||
|
|
import { WeaCheckbox, WeaDialog, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
|
||
|
|
import "./index.less";
|
||
|
|
|
||
|
|
const { getLabel } = WeaLocaleProvider;
|
||
|
|
|
||
|
|
class AddHeaderFieldsModal extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
itemsCheckeds: [],
|
||
|
|
showOnlyChecked: false
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
||
|
|
if (nextProps.visible !== this.props.visible && nextProps.visible) {
|
||
|
|
this.setState({
|
||
|
|
itemsCheckeds: nextProps.selectItems ? _.map(nextProps.selectItems.split(","), it => Number(it)) : []
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleShowOnlyChecked = (showOnlyChecked) => this.setState({ showOnlyChecked: !!Number(showOnlyChecked) });
|
||
|
|
handleSelectGroupAll = (groupId, checked) => {
|
||
|
|
const { itemsCheckeds } = this.state;
|
||
|
|
const { itemsByGroup } = this.props;
|
||
|
|
_.map(itemsByGroup, item => {
|
||
|
|
if (item.salarySobItemGroupId === groupId) {
|
||
|
|
if (!!Number(checked)) {
|
||
|
|
this.setState({
|
||
|
|
itemsCheckeds: [...itemsCheckeds, ..._.map(item.salaryItems, child => child.salaryItemId)]
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.setState({
|
||
|
|
itemsCheckeds: _.differenceWith(itemsCheckeds, _.map(item.salaryItems, child => child.salaryItemId), _.isEqual)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { showOnlyChecked, itemsCheckeds } = this.state;
|
||
|
|
const { itemsByGroup } = this.props;
|
||
|
|
let dataSource = _.map(itemsByGroup, item => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
salaryItems: _.map(item.salaryItems, child => {
|
||
|
|
return { ...child, checked: itemsCheckeds.includes(child.salaryItemId) };
|
||
|
|
})
|
||
|
|
};
|
||
|
|
});
|
||
|
|
if (showOnlyChecked) {
|
||
|
|
dataSource = _.map(dataSource, item => {
|
||
|
|
return { ...item, salaryItems: _.filter(item.salaryItems, it => !!it.checked) };
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<WeaDialog
|
||
|
|
{...this.props} hasScroll initLoadCss
|
||
|
|
scalable title={getLabel(111, "添加表头字段")}
|
||
|
|
style={{ width: 700, height: 484 }} className="addHeaderFieldsWrapper"
|
||
|
|
buttons={[
|
||
|
|
<Button type="primary" onClick={() => this.props.onAdd(itemsCheckeds)}>{getLabel(111, "添加")}</Button>,
|
||
|
|
<Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取消")}</Button>
|
||
|
|
]}
|
||
|
|
bottomLeft={<WeaCheckbox content={getLabel(111, "只显示已选中字段")}
|
||
|
|
onChange={this.handleShowOnlyChecked}/>}
|
||
|
|
>
|
||
|
|
{
|
||
|
|
_.map(dataSource, item => {
|
||
|
|
const { salarySobItemGroupName, salaryItems, salarySobItemGroupId } = item;
|
||
|
|
const value = _.every(salaryItems, it => !!it.checked) ? "1" : "0";
|
||
|
|
return <WeaSearchGroup showGroup needTigger
|
||
|
|
title={<WeaCheckbox content={salarySobItemGroupName} value={value}
|
||
|
|
onChange={(val) => this.handleSelectGroupAll(salarySobItemGroupId, val)}/>}>
|
||
|
|
<Row gutter={16}>
|
||
|
|
{
|
||
|
|
!_.isEmpty(salaryItems) ?
|
||
|
|
_.map(salaryItems, it => {
|
||
|
|
const { salaryItemId, salaryItemName, checked } = it;
|
||
|
|
return <Col span={8} style={{ marginBottom: 16 }}>
|
||
|
|
<WeaCheckbox content={salaryItemName} value={checked ? "1" : "0"}
|
||
|
|
onChange={() => this.setState({ itemsCheckeds: _.xorWith(itemsCheckeds, [salaryItemId], _.isEqual) })}/>
|
||
|
|
</Col>;
|
||
|
|
}) : <Col span={24} style={{ minHeight: 20, padding: "5%", textAlign: "center" }}>暂无数据</Col>
|
||
|
|
}
|
||
|
|
</Row>
|
||
|
|
</WeaSearchGroup>;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</WeaDialog>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default AddHeaderFieldsModal;
|