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

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>;
};