添加计算控件

src/components/AuditForm/FormulaModal.js

@@ -1,20 +1,76 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Divider, Input, Modal, Select, Table } from 'antd';
+import { Divider, Input, Modal, Select, Table, message, Button } from 'antd';
 
 const { TextArea } = Input;
 
+export const FormulaType = {
+  Filed: 'filed',
+  Symbol: 'symbol',
+  Number: 'number',
+};
+
 const FormulaModal = (props) => {
   const { item, numFiledList = [], visible, onCancel, onChange } = props;
   const symbolList = ['+', '-', '*', '/', '(', ')'];
   const numberList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'];
 
-  const [formula, setFormula] = useState();
+  const [formula, setFormula] = useState([]);
 
-  const [data, setData] = useState([]);
+  useEffect(() => {
+    if (!visible) setFormula([]);
+    if (item?.props) setFormula(item.props.formula || []);
+  }, [visible, item]);
 
   const value = useMemo(() => {
-    return '计算公式=';
+    const strList = formula.map((item) =>
+      item.type == FormulaType.Filed ? `【${item.label}】` : item.label,
+    );
+    return '计算公式=' + strList.join('');
   }, [formula]);
+  console.log('-----------------', formula);
+
+  const isSameBeforItem = (type) => {
+    return formula.length > 0 && formula[formula.length - 1].type == type;
+  };
+
+  const handlerChange = (type, item) => {
+    let obj = {};
+    console.log(formula[formula.length - 1]);
+    switch (type) {
+      case FormulaType.Filed:
+        if (isSameBeforItem(FormulaType.Filed)) {
+          message.error('不能选择连续两个组件');
+        }
+        obj = {
+          type: FormulaType.Filed,
+          id: item.props.id,
+          label: item.props.label,
+        };
+        setFormula([...formula, obj]);
+        break;
+      case FormulaType.Symbol:
+        if (isSameBeforItem(FormulaType.Symbol)) {
+          message.error('不能选择连续两个符号');
+        }
+        obj = { type: FormulaType.Symbol, label: item };
+        setFormula([...formula, obj]);
+        break;
+      case FormulaType.Number:
+        //如果前一个选择的也是数字则合并数字 否则直接添加
+        if (isSameBeforItem(FormulaType.Number)) {
+          const len = formula.length - 1;
+          const label = formula[len].label + item;
+          obj = { type: FormulaType.Number, label };
+          const result = [...formula];
+          result[len] = obj;
+          setFormula(result);
+        } else {
+          obj = { type: FormulaType.Number, label: item };
+          setFormula([...formula, obj]);
+        }
+        break;
+    }
+  };
 
   return (
     <Modal
@@ -22,20 +78,24 @@ const FormulaModal = (props) => {
       open={visible}
       onCancel={onCancel}
       onOk={() => {
-        const linked = {};
-        data?.forEach((cur) => {
-          linked[cur.name] = cur.linked;
-        });
-        onChange?.({ linked });
+        onChange?.({ ...item.props, formula, formulaLabel: value });
       }}
       width={1000}
       pagination={false}
     >
       <Divider />
+
+      <Button
+        type="primary"
+        style={{ marginBottom: '20px' }}
+        onClick={() => setFormula([])}
+      >
+        清空
+      </Button>
       <TextArea value={value} />
       <div style={{ margin: '20px 20px 20px 0' }}>
         计算对象：
-        {numFiledList.map((item) => (
+        {numFiledList.map((item, idx) => (
           <span
             style={{
               padding: '6px 10px',
@@ -43,14 +103,15 @@ const FormulaModal = (props) => {
               borderRadius: '2px',
               marginRight: '10px',
             }}
+            onClick={() => handlerChange(FormulaType.Filed, item)}
           >
             {item.props.label}
           </span>
         ))}
       </div>
       <div style={{ margin: '0 20px 20px 0' }}>
-        计算对象：
-        {symbolList.map((item) => (
+        计算符号：
+        {symbolList.map((item, idx) => (
           <span
             style={{
               padding: '6px 10px',
@@ -58,6 +119,7 @@ const FormulaModal = (props) => {
               borderRadius: '2px',
               marginRight: '10px',
             }}
+            onClick={() => handlerChange(FormulaType.Symbol, item)}
           >
             {item}
           </span>
@@ -65,7 +127,7 @@ const FormulaModal = (props) => {
       </div>
       <div style={{ margin: '0 20px 20px 0' }}>
         数字键盘：
-        {numberList.map((item) => (
+        {numberList.map((item, idx) => (
           <span
             style={{
               padding: '6px 10px',
@@ -73,6 +135,7 @@ const FormulaModal = (props) => {
               borderRadius: '2px',
               marginRight: '10px',
             }}
+            onClick={() => handlerChange(FormulaType.Number, item)}
           >
             {item}
           </span>

src/components/AuditForm/ItemAttribute.js

@@ -598,6 +598,9 @@ function TableName(props) {
 function FormulaField(props) {
   const { item, btns, onFinish, onFormulaClick } = props;
   const [form] = Form.useForm();
+  const value = useMemo(() => {
+    return item.props.formulaLabel;
+  }, [item.props]);
   return (
     <Form
       form={form}
@@ -605,7 +608,7 @@ function FormulaField(props) {
       wrapperCol={{ span: 20 }}
       autoComplete="off"
       initialValues={item.props}
-      onFinish={onFinish}
+      onFinish={(values) => onFinish({ ...item.props, ...values })}
     >
       <Form.Item label="标题" name="label">
         <Input />
@@ -614,7 +617,7 @@ function FormulaField(props) {
         <Input />
       </Form.Item>
       <Form.Item label="计算公式">
-        <Input onClick={onFormulaClick} />
+        <Input value={value} onClick={onFormulaClick} />
       </Form.Item>
       <Form.Item label="必填" name="required" valuePropName="checked">
         <Switch />

src/components/DDComponents/FormulaField/index.js

@@ -0,0 +1,10 @@
+import React, { useEffect, useState } from 'react';
+import { Input } from 'antd';
+
+function FormulaField(props) {
+  const { evalStr } = props;
+
+  return <Input value={eval(evalStr)} />;
+}
+
+export default FormulaField;

src/components/DDComponents/index.js

@@ -15,9 +15,10 @@ import DDAttachment from './DDAttachment';
 import TextNote from './TextNote';
 import CodeField from './CodeFiled';
 import DIYTable from './DIYTable';
+import FormulaField from './FormulaField';
 
 export default function DDComponents(props) {
-  const { depId = '', item, onChange } = props;
+  const { depId = '', evalStr = '', item, onChange } = props;
   const { placeholder, options, format, unit, disabled, notUpper } = item.props;
   let component = null;
   switch (item.componentName) {
@@ -118,6 +119,12 @@ export default function DDComponents(props) {
         <DIYTable table={item} columns={item.columns} onChange={onChange} />
       );
       break;
+    case 'CodeField': //合同编号控件
+      component = <CodeField depId={depId} />;
+      break;
+    case 'FormulaField': //计算控件
+      component = <FormulaField evalStr={evalStr} />;
+      break;
     case 'RelateField': //关联审批单
       component = '关联审批单控件未渲染!';
       break;
@@ -130,9 +137,6 @@ export default function DDComponents(props) {
     case 'FormRelateField': //关联控件
       component = '关联控件未渲染!';
       break;
-    case 'CodeField': //合同编号控件
-      component = <CodeField depId={depId} />;
-      break;
   }
 
   return (

src/pages/Flow/components/AuditDetailed.js

@@ -1,6 +1,7 @@
 import DDComponents from '@/components/DDComponents';
 import React, { useMemo, useState } from 'react';
 import { Button, Form } from 'antd';
+import { FormulaType } from '@/components/AuditForm/FormulaModal';
 
 const AuditDetailed = (props) => {
   // const [form] = Form.useForm();
@@ -72,6 +73,28 @@ const AuditDetailed = (props) => {
       }
     }
 
+    const renderComponents = () => {
+      let content = '';
+      if (item.componentName === 'CodeField') {
+        content = <DDComponents item={item} depId={depId} />;
+      } else if (item.componentName === 'FormulaField') {
+        const strList = item.props?.formula?.map((formu) => {
+          if (formu.type == FormulaType.Filed) {
+            const numItem = allValues?.find((item) => item.id == formu.id);
+            return numItem?.value[0] || 0;
+          } else {
+            return formu.label;
+          }
+        });
+        console.log('-------44444-------------', item, strList);
+        const evalStr = strList?.join('');
+        content = <DDComponents item={item} evalStr={evalStr} />;
+      } else {
+        content = <DDComponents item={item} />;
+      }
+      return content;
+    };
+
     // const component = DDComponents({ item });
     // if (!component) return null;
     return (
@@ -83,11 +106,7 @@ const AuditDetailed = (props) => {
             label={formLabel}
             rules={[{ required: required }]}
           >
-            {item.componentName === 'CodeField' ? (
-              <DDComponents item={item} depId={depId} />
-            ) : (
-              <DDComponents item={item} />
-            )}
+            {renderComponents()}
           </Form.Item>
         ) : (
           <DDComponents item={item} onChange={onTableValChange} />