351 lines
12 KiB
JavaScript
351 lines
12 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 统计数据范围及规则设置
|
|
* Description:
|
|
* Date: 2023/4/21
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { toJS } from "mobx";
|
|
import {
|
|
WeaButtonIcon,
|
|
WeaDatePicker,
|
|
WeaError,
|
|
WeaFormItem,
|
|
WeaHelpfulTip,
|
|
WeaLocaleProvider,
|
|
WeaSearchGroup,
|
|
WeaSelect,
|
|
WeaSlideModal,
|
|
WeaTable
|
|
} from "ecCom";
|
|
import CustomStatisticsItemsModal from "./customStatisticsItemsModal";
|
|
import moment from "moment";
|
|
import { Button, message, Modal } from "antd";
|
|
import { condition } from "./condition";
|
|
import { getSearchs } from "../../../util";
|
|
import {
|
|
deleteRangeSetting,
|
|
reportStatisticsGetSearchCondition,
|
|
reportStatisticsItemDelete,
|
|
reportStatisticsSaveSearchCondition,
|
|
statisticsItemList
|
|
} from "../../../apis/statistics";
|
|
import { commonEnumList } from "../../../apis/ruleconfig";
|
|
import "../index.less";
|
|
|
|
const { getLabel } = WeaLocaleProvider;
|
|
|
|
class StatisticalMicroSettingsSlide extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
loading: false,
|
|
selectedRowKeys: [],
|
|
conditions: [],
|
|
dataSource: [],
|
|
unitTypeList: [],
|
|
salaryMonth: [],
|
|
statisticalItemPayload: {
|
|
visible: false, id: "", dimension: "",
|
|
statisticsItemId: ""
|
|
}
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.taxAgentAdminOption !== this.props.taxAgentAdminOption && !_.isEmpty(nextProps.taxAgentAdminOption)) {
|
|
const conditions = _.map(condition, item => {
|
|
return {
|
|
...item,
|
|
items: _.map(item.items, child => {
|
|
if (child.domkey[0] === "taxAgent") {
|
|
return {
|
|
...child,
|
|
options: toJS(nextProps.taxAgentAdminOption)
|
|
};
|
|
}
|
|
return { ...child };
|
|
})
|
|
};
|
|
});
|
|
this.setState({ conditions });
|
|
nextProps.form.initFormFields(condition);
|
|
}
|
|
if (nextProps.id !== this.props.id && !_.isEmpty(nextProps.id)) {
|
|
this.reportStatisticsGetSearchCondition(nextProps.id);
|
|
this.statisticsItemList(nextProps.id).then(r => {
|
|
});
|
|
}
|
|
if (nextProps.visible !== this.props.visible && !nextProps.visible) {
|
|
nextProps.form.resetForm();
|
|
this.setState({ selectedRowKeys: [] });
|
|
}
|
|
}
|
|
|
|
reportStatisticsGetSearchCondition = (id) => {
|
|
const { conditions } = this.state;
|
|
const { form } = this.props;
|
|
reportStatisticsGetSearchCondition({ id }).then(({ status, data }) => {
|
|
if (status && !_.isEmpty(data)) {
|
|
const { salaryEndMonth, salaryStartMonth, ...formData } = data.data;
|
|
this.setState({
|
|
salaryMonth: [salaryStartMonth || moment().startOf("year").format("YYYY-MM"), salaryEndMonth || moment().format("YYYY-MM")]
|
|
});
|
|
const fields = _.map(conditions[0].items, it => it.domkey[0]);
|
|
fields.map(item => {
|
|
const value = item.indexOf("hiredate") !== -1 ? {
|
|
value: formData["hiredate"] || []
|
|
} : {
|
|
value: !_.isNil(formData[item]) ? _.map(formData[item], val => val.id).join(",") : "",
|
|
valueSpan: !_.isNil(formData[item]) ? _.map(formData[item], val => val.name).join(",") : "",
|
|
valueObj: !_.isNil(formData[item]) ? formData[item] : []
|
|
};
|
|
const key = item.indexOf("hiredate") !== -1 ? "hiredate1__hiredate2" : item;
|
|
form.updateFields({
|
|
[key]: value
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
reportStatisticsSaveSearchCondition = () => {
|
|
const { salaryMonth, dataSource } = this.state;
|
|
const { form, id, dimension, onClose } = this.props;
|
|
const [salaryStartMonth, salaryEndMonth] = salaryMonth;
|
|
const { department, employee, position, subCompany, taxAgent, ...extra } = form.getFormDatas();
|
|
const { value, valueSpan } = taxAgent;
|
|
if (!salaryEndMonth || !salaryStartMonth) {
|
|
this.refs.weaError.showError();
|
|
return;
|
|
}
|
|
const payload = {
|
|
dimension, id,
|
|
hiredate: extra["hiredate1__hiredate2"].value || [],
|
|
department: _.map(department.valueObj, it => ({ id: it.id, name: it.name })),
|
|
employee: _.map(employee.valueObj, it => ({ id: it.id, name: it.name })),
|
|
// position: _.map(position.valueObj, it => ({ id: it.id, name: it.name })),
|
|
subCompany: _.map(subCompany.valueObj, it => ({ id: it.id, name: it.name })),
|
|
taxAgent: value ? _.map(value.split(","), (it, idx) => ({ id: it, name: valueSpan.split(",")[idx] })) : [],
|
|
items: dataSource,
|
|
salaryEndMonth: salaryEndMonth + "-01",
|
|
salaryStartMonth: salaryStartMonth + "-01"
|
|
};
|
|
this.setState({ loading: true });
|
|
reportStatisticsSaveSearchCondition(payload).then(({ status, errormsg }) => {
|
|
this.setState({ loading: false });
|
|
if (status) {
|
|
onClose(true);
|
|
message.success(getLabel(111, "保存成功"));
|
|
} else {
|
|
message.error(errormsg);
|
|
}
|
|
}).catch(() => this.setState({ loading: false }));
|
|
};
|
|
reportStatisticsItemDelete = () => {
|
|
Modal.confirm({
|
|
title: getLabel(111, "信息确认"),
|
|
content: getLabel(111, "确认要删除吗?"),
|
|
onOk: () => {
|
|
const { selectedRowKeys } = this.state;
|
|
reportStatisticsItemDelete(selectedRowKeys).then(({ status, errormsg }) => {
|
|
if (status) {
|
|
message.success(getLabel(111, "删除成功"));
|
|
this.setState({
|
|
selectedRowKeys: []
|
|
}, () => {
|
|
this.statisticsItemList(this.props.id).then(r => {
|
|
deleteRangeSetting({ reportId: this.props.id });
|
|
});
|
|
});
|
|
} else {
|
|
message.error(errormsg || getLabel(111, "删除失败"));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
statisticsItemList = async (statisticsReportId = "") => {
|
|
const { data: unitTypeList } = await this.commonEnumList();
|
|
statisticsItemList({ statisticsReportId }).then(({ status, data }) => {
|
|
if (status) {
|
|
this.setState({
|
|
dataSource: data,
|
|
unitTypeList: _.map(unitTypeList, it => ({ key: it.value.toString(), showname: it.defaultLabel }))
|
|
});
|
|
}
|
|
});
|
|
};
|
|
commonEnumList = () => {
|
|
const payload = {
|
|
enumClass: "com.engine.salary.report.enums.UnitTypeEnum"
|
|
};
|
|
return commonEnumList(payload);
|
|
};
|
|
renderGroupTitle = () => {
|
|
return <div className="groupTitleWrapper">
|
|
<span>{getLabel(111, "统计数据范围")}</span>
|
|
<span>{getLabel(111, "统计满足以下所有条件的人员薪资核算数据，不选则默认为选择全部")}</span>
|
|
</div>;
|
|
};
|
|
renderProjectTitle = () => {
|
|
const { selectedRowKeys } = this.state;
|
|
const { id, dimension } = this.props;
|
|
return <div className="groupPorjectTitleWrapper">
|
|
<div>
|
|
<span>{getLabel(111, "统计项目")}</span>
|
|
<WeaHelpfulTip width={200} placement="topLeft"
|
|
title={getLabel(111, "统计列表的统计项排序与本列表统计项的顺序一致")}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<WeaButtonIcon
|
|
buttonType="del" type="primary" disabled={_.isEmpty(selectedRowKeys)}
|
|
onClick={this.reportStatisticsItemDelete}
|
|
/>
|
|
<WeaButtonIcon
|
|
buttonType="add" type="primary"
|
|
onClick={() => this.setState({
|
|
statisticalItemPayload: {
|
|
visible: true, id, dimension,
|
|
statisticsItemId: ""
|
|
}
|
|
})}
|
|
/>
|
|
</div>
|
|
</div>;
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
salaryMonth, conditions, selectedRowKeys, loading,
|
|
statisticalItemPayload, dataSource, unitTypeList
|
|
} = this.state;
|
|
const { id, dimension } = this.props;
|
|
const columns = [
|
|
{
|
|
title: "统计项名称",
|
|
dataIndex: "itemName",
|
|
render: (txt, record) => {
|
|
return (
|
|
<a href="javascript: void(0);" onClick={() => this.setState({
|
|
statisticalItemPayload: { visible: true, id, dimension, statisticsItemId: record.id }
|
|
})}>{txt}</a>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "统计单位",
|
|
dataIndex: "unitType",
|
|
render: (txt, record) => {
|
|
return <WeaSelect
|
|
value={!_.isNil(txt) ? txt.toString() : ""} options={unitTypeList} style={{ width: 150 }}
|
|
onChange={unitType => this.customStatisticsItemsRef.reportStatisticsItemSave({ id: record.id, unitType })}
|
|
/>;
|
|
}
|
|
}
|
|
];
|
|
const rowSelection = {
|
|
selectedRowKeys,
|
|
onChange: (selectedRowKeys) => {
|
|
this.setState({ selectedRowKeys });
|
|
}
|
|
};
|
|
return (
|
|
<WeaSlideModal
|
|
className="microSlideWrapper"
|
|
{...this.props}
|
|
onClose={() => this.props.onClose()}
|
|
top={0}
|
|
measureT="%"
|
|
width={800}
|
|
measureX="px"
|
|
height={100}
|
|
measureY="%"
|
|
direction={"right"}
|
|
title={<TitleDialog loading={loading} onSave={this.reportStatisticsSaveSearchCondition}/>}
|
|
content={
|
|
<React.Fragment>
|
|
<WeaSearchGroup title={getLabel(111, "统计时间范围")} col={2} showGroup needTigger>
|
|
<WeaFormItem label={getLabel(111, "薪资所属月")} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
|
<WeaError tipPosition="bottom" ref="weaError" error={getLabel(111, "此项必填")}>
|
|
<MonthRangePicker viewAttr={3} dateRange={salaryMonth}
|
|
onChange={v => this.setState({ salaryMonth: v })}/>
|
|
</WeaError>
|
|
</WeaFormItem>
|
|
</WeaSearchGroup>
|
|
{
|
|
getSearchs(this.props.form, conditions, 2, false, () => {
|
|
}, this.renderGroupTitle())
|
|
}
|
|
<WeaSearchGroup title={this.renderProjectTitle()} showGroup needTigger>
|
|
<WeaTable
|
|
rowKey="id"
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
draggable={true}
|
|
onDrop={datas => this.setState({
|
|
dataSource: _.map(datas, (it, idx) => ({ ...it, indexValue: idx.toString() }))
|
|
})}
|
|
pagination={false}
|
|
rowSelection={rowSelection}
|
|
/>
|
|
<CustomStatisticsItemsModal
|
|
ref={dom => this.customStatisticsItemsRef = dom}
|
|
{...statisticalItemPayload}
|
|
onCancel={(isRefresh) => this.setState({
|
|
statisticalItemPayload: {
|
|
visible: false,
|
|
id: "",
|
|
dimension: "",
|
|
statisticsItemId: ""
|
|
}
|
|
}, () => isRefresh && this.statisticsItemList(this.props.id))}
|
|
/>
|
|
</WeaSearchGroup>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default StatisticalMicroSettingsSlide;
|
|
const TitleDialog = (props) => {
|
|
return <div className="titleDialog">
|
|
<div className="titleCol">
|
|
<div className="titleLeftBox">
|
|
<div className="titleIcon"><i className="icon-coms-fa"/></div>
|
|
<div className="title">{getLabel(111, "统计数据范围及规则设置")}</div>
|
|
</div>
|
|
</div>
|
|
<div className="titleCol titleRightBox">
|
|
<Button type="primary" loading={props.loading} onClick={props.onSave}>{getLabel(111, "保存")}</Button>
|
|
</div>
|
|
</div>;
|
|
};
|
|
const MonthRangePicker = (props) => {
|
|
const { dateRange, onChange, viewAttr } = props;
|
|
const [startDate, endDate] = dateRange || [];
|
|
return <div className="rangePickerBox">
|
|
<WeaDatePicker
|
|
value={startDate}
|
|
disabledDate={(current) => {
|
|
return current && endDate && current.getTime() > new Date(endDate).getTime();
|
|
}}
|
|
format="YYYY-MM"
|
|
onChange={(val) => onChange([val, endDate])}
|
|
viewAttr={viewAttr}
|
|
/>
|
|
<span className="to" style={{ margin: "0 10px" }}>至</span>
|
|
<WeaDatePicker
|
|
value={endDate}
|
|
disabledDate={(current) => {
|
|
return current && startDate && current.getTime() < new Date(startDate).getTime();
|
|
}}
|
|
format="YYYY-MM"
|
|
viewAttr={viewAttr}
|
|
onChange={(val) => onChange([startDate, val])}
|
|
/>
|
|
</div>;
|
|
};
|