薪资项目测试

pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js

@@ -3,6 +3,7 @@ import { Button, Col, Icon, Modal, Row } from "antd";
 import { WeaCheckbox, WeaDialog, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
 import { inject, observer } from "mobx-react";
 import "./index.less";
+import TestModal from "./testModal";
 
 @inject("salaryItemStore")
 @observer
@@ -21,7 +22,8 @@ export default class FormalFormModal extends React.Component {
         }
       },
       returnValue: "",
-      formulaDatasourceList: []
+      formulaDatasourceList: [],
+      testVisible: false
     };
     this.group = {};
     this.field = {};
@@ -256,10 +258,14 @@ export default class FormalFormModal extends React.Component {
   render() {
     const { salaryItemStore } = this.props;
     const { searchGroup, searchFields } = salaryItemStore;
-    const { value, formulaDatasourceList, extendParam } = this.state;
+    const { value, formulaDatasourceList, extendParam, testVisible } = this.state;
     const title = <div className="formulaTitleWrapper">
       <div>{`${(this.props.valueType == 2 || this.props.valueType === "FORMULA") ? "函数" : "SQL"}公式`}</div>
-      <Button type="primary">测试</Button>
+      {
+        value && <Button type="primary" onClick={() => this.setState({ testVisible: true })}>测试</Button>
+      }
+      {/*公式测试*/}
+      <TestModal visible={testVisible} testParams={value} onCancel={() => this.setState({ testVisible: false })}/>
     </div>;
     return (
       <WeaDialog

pc4mobx/hrmSalary/pages/salaryItem/index.less

@@ -19,7 +19,8 @@
     justify-content: flex-end;
     margin-bottom: 20px;
   }
-  .formulaTitleWrapper{
+
+  .formulaTitleWrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -50,10 +51,11 @@
 
 //系统薪资项添加modal
 .sys-salary-wrapper {
-  .wea-dialog-body{
+  .wea-dialog-body {
     height: 50vh;
     overflow: hidden auto;
-    .headerSearchWrapper{
+
+    .headerSearchWrapper {
       display: flex;
       justify-content: flex-end;
       align-items: center;
@@ -61,3 +63,26 @@
     }
   }
 }
+
+//公式测试
+.testModalWrapper {
+  .testContent {
+    padding: 16px;
+    overflow-y: auto;
+    max-height: 537px;
+    min-height: 100px;
+
+    .testTipWrapper {
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      color: #999;
+    }
+
+    .wea-textarea-normal {
+      border: 1px solid #e5e5e5 !important;
+      padding: 4px 8px !important;
+      min-height: 70px!important;
+    }
+  }
+}

pc4mobx/hrmSalary/pages/salaryItem/testModal.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { Button } from "antd";
+import { WeaDialog, WeaSearchGroup, 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.testParams !== this.props.testParams && nextProps.testParams) {
+      this.setState({
+        testValue: nextProps.testParams.split(/({.*?})/).filter(s => !!s)
+      });
+    }
+  }
+
+  render() {
+    const { visible, onCancel, testParams } = this.props;
+    const { showResults, testValue } = this.state;
+    return (
+      <WeaDialog
+        visible={visible}
+        onCancel={onCancel}
+        initLoadCss
+        className="testModalWrapper"
+        style={{ width: 800 }}
+        title="公式测试"
+        buttons={[
+          <Button type="primary" onClick={() => {
+          }}> 执行 </Button>
+        ]}>
+        <div className="testContent">
+          <WeaSearchGroup title="" showGroup><WeaTextarea viewAttr={1} value={testParams}/></WeaSearchGroup>
+          <WeaSearchGroup title="输入参数测试值" showGroup></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>;
+};