Merge branch 'feature/v2-薪资项目公式测试' into develop

pc4mobx/hrmSalary/apis/item.js

@@ -144,6 +144,17 @@ export const saveFormual = params => {
         body: JSON.stringify(params)
     }).then(res => res.json())
 }
+// 公式测试
+export const testFormual = params => {
+    return fetch('/api/bs/hrmsalary/formula/mock', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
 
 // 根据id获取formual
 export const detailFormual = params => {

pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js

@@ -1,7 +1,9 @@
 import React from "react";
-import { Button, Col, Icon, Modal, Row } from "antd";
+import { Button, Col, Icon, message, Modal, Row } from "antd";
 import { WeaCheckbox, WeaDialog, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
 import { inject, observer } from "mobx-react";
+import { testFormual } from "../../apis/item";
+import TestModal from "./testModal";
 import "./index.less";
 
 @inject("salaryItemStore")
@@ -21,7 +23,9 @@ export default class FormalFormModal extends React.Component {
         }
       },
       returnValue: "",
-      formulaDatasourceList: []
+      formulaDatasourceList: [],
+      testVisible: false,
+      showTestVal: ""
     };
     this.group = {};
     this.field = {};
@@ -64,7 +68,7 @@ export default class FormalFormModal extends React.Component {
         let groupParams = {};
         if (this.referenceType == "sql") {
           groupParams = { "referenceType": "sql" };
-        }else{
+        } else {
           groupParams = this.props.backCalcType === "issuedItems" ? { "referenceType": "backCalc" } : {};
         }
         salaryAcctImportTemplateParam(groupParams);
@@ -174,7 +178,7 @@ export default class FormalFormModal extends React.Component {
   }
 
   // 保存
-  handleSave() {
+  handleSave = () => {
     const { salaryItemStore } = this.props;
     const { saveFormual } = salaryItemStore;
     this.parameters = this.parameters.filter(item => this.state.value.indexOf(item.name) > -1);
@@ -208,7 +212,7 @@ export default class FormalFormModal extends React.Component {
       this.props.onSaveFormal(data);
       this.props.onCancel();
     });
-  }
+  };
 
   /**
    * name: 获取文本框光标位置
@@ -253,19 +257,87 @@ export default class FormalFormModal extends React.Component {
     let position = this.insertText(propsTextarea, fieldName); // 光标的位置
   }
 
+  handleChangeTestValue = (record, value) => {
+    if (!record && !value) {
+      this.parameters = _.map(this.parameters, item => ({ ...item, content: null }));
+      this.setState({
+        showTestVal: "显示结果"
+      });
+    } else {
+      this.parameters = _.map(this.parameters, item => {
+        if (item.id === record.id) {
+          return {
+            ...item,
+            content: value
+          };
+        }
+        return { ...item };
+      });
+    }
+    this.forceUpdate();
+  };
+  handleImplement = () => {
+    this.parameters = this.parameters.filter(item => this.state.value.indexOf(item.name) > -1);
+    let result = [];
+    this.parameters.map(item => {
+      let flag = false;
+      result.map(i => {
+        if (item.fieldId == i.fieldId) {
+          flag = true;
+        }
+      });
+      if (!flag) {
+        result.push(item);
+      }
+    });
+    this.parameters = result;
+    let params = {
+      name: "公式1",
+      description: "备注",
+      module: "salary",
+      useFor: "salaryitem",
+      returnType: this.props.dataType || this.state.returnType,
+      validateType: this.props.dataType || this.state.returnType,
+      extendParam: JSON.stringify(this.state.extendParam),
+      formula: this.state.value,
+      parameters: this.parameters,
+      referenceType: this.referenceType == "" ? this.props.valueType == "2" ? "formula" : this.props.valueType == "3" ? "sql" : "" : this.referenceType
+    };
+    testFormual(params).then(({ status, data, errormsg }) => {
+      if (status) {
+        message.success("测试结果已更新");
+        this.setState({
+          showTestVal: data
+        });
+      } else {
+        message.error(errormsg || "");
+      }
+    });
+  };
+
   render() {
     const { salaryItemStore } = this.props;
     const { searchGroup, searchFields } = salaryItemStore;
-    const { value, formulaDatasourceList, extendParam } = this.state;
+    const { value, formulaDatasourceList, extendParam, testVisible, showTestVal } = this.state;
+    const title = <div className="formulaTitleWrapper">
+      <div>{`${(this.props.valueType == 2 || this.props.valueType === "FORMULA") ? "函数" : "SQL"}公式`}</div>
+      {
+        value && <Button type="primary" onClick={() => this.setState({ testVisible: true })}>测试</Button>
+      }
+      {/*公式测试*/}
+      <TestModal visible={testVisible} testParams={value} parameters={this.parameters}
+                 showTestVal={showTestVal}
+                 onChangeTestValue={this.handleChangeTestValue}
+                 onImplement={this.handleImplement}
+                 onCancel={() => this.setState({ testVisible: false }, () => this.handleChangeTestValue())}/>
+    </div>;
     return (
       <WeaDialog
-        title={`${(this.props.valueType == 2 || this.props.valueType === "FORMULA") ? "函数" : "SQL"}公式`}
+        title={title}
         visible={this.props.visible}
         style={{ width: 800 }}
         buttons={[
-          <Button type="primary" onClick={() => {
-            this.handleSave();
-          }}>保存</Button>
+          <Button type="primary" onClick={this.handleSave}>保存</Button>
         ]}
         className="formula-wrapper"
         initLoadCss

pc4mobx/hrmSalary/pages/salaryItem/index.less

@@ -19,6 +19,13 @@
     justify-content: flex-end;
     margin-bottom: 20px;
   }
+
+  .formulaTitleWrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
 }
 
 .dataList-wrapper {
@@ -44,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;
@@ -55,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,94 @@
+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.props.parameters && nextProps.parameters) {
+      this.setState({
+        testValue: nextProps.parameters
+      });
+    }
+    if (nextProps.showTestVal !== this.props.showTestVal && 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>;
+};