salary-management-front/pc4mobx/hrmSalary/pages/salaryItem/testModal.js

96 lines
2.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from "react";
import { Button } from "antd";
import { WeaDialog, WeaInput, WeaSearchGroup, WeaTable, WeaTextarea } from "ecCom";
import { inject, observer } from "mobx-react";
import "./index.less";
@inject("ledgerStore")
@observer
export default class TestModal extends React.Component {
constructor(props) {
super(props);
this.state = {
testValue: [],
showResults: "显示结果"
};
}
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.parameters) {
this.setState({
testValue: nextProps.parameters
});
}
if (nextProps.showTestVal !== this.props.showTestVal && !_.isNil(nextProps.showTestVal)) {
this.setState({
showResults: nextProps.showTestVal
});
}
}
renderInputItem = () => {
const { onChangeTestValue } = this.props;
const { testValue } = this.state;
const dataSource = !_.isEmpty(testValue) ? _.map(testValue, item => {
return {
...item,
paramsName: item.fieldName.replace(/[{}]/g, "")
};
}) : [];
const columns = [
{
dataIndex: "paramsName", title: "参数名"
},
{
dataIndex: "content", title: "测试值",
render: (text, record) => {
return (
<WeaInput
value={record.content}
onChange={(val) => onChangeTestValue(record, val)}
/>
);
}
}
];
return <WeaTable
rowKey="id"
dataSource={dataSource}
pagination={false}
columns={columns}
/>;
};
render() {
const { visible, onCancel, testParams, onImplement } = this.props;
const { showResults } = this.state;
return (
<WeaDialog
visible={visible}
onCancel={onCancel}
initLoadCss
className="testModalWrapper"
style={{ width: 800 }}
title="公式测试"
buttons={[
<Button type="primary" onClick={onImplement}>执行</Button>
]}>
<div className="testContent">
<WeaSearchGroup title="" showGroup><WeaTextarea viewAttr={1} value={testParams}/></WeaSearchGroup>
<WeaSearchGroup title="输入参数测试值" showGroup>{this.renderInputItem()}</WeaSearchGroup>
<WeaSearchGroup title="测试结果" showGroup><WeaTextarea viewAttr={1} value={showResults}/></WeaSearchGroup>
<TestTip/>
</div>
</WeaDialog>
);
}
}
const TestTip = () => {
return <div className="testTipWrapper">
<div>涉及到选择具体数据进行运算时请先检查对应数据源中是否有数据项</div>
<div>涉及到日期控件时请先选择日期控件的格式保持和控件本身设置的格式一致否则可能会导致预期与实际执行结果不一致</div>
<div>涉及到日期控件判断与预期不符合时请先检查日期控件的格式是否与等号右边的格式保持一致</div>
</div>;
};