Squashed commit of the following:

添加计算控件
commit 3be11edf42ad8b8741688b42ce2d7367605b5605
Author: Renxy <18510891294@163.com>
Date:   Mon Jul 31 18:03:55 2023 +0800

    添加计算控件

commit 05ca052197df98dc1cb26ba20401875f13bb1ceb
Author: Renxy <18510891294@163.com>
Date:   Mon Jul 31 15:14:38 2023 +0800

    计算控件

.umirc.ts

@@ -212,18 +212,18 @@ export default defineConfig({
       component: './PSRManage/detail',
       hideInMenu: true,
     },
-    {
-      name: 'CAD实例',
-      path: '/cad',
-      component: './Cad',
-      icon: 'https://gt-digitization.oss-cn-hangzhou.aliyuncs.com/doc/department/2023-04/manufacturerIcon.png',
-    },
-    {
-      name: 'CAD详情',
-      path: '/cad/detail',
-      component: './Cad/detail',
-      hideInMenu: true,
-    },
+    // {
+    //   name: 'CAD实例',
+    //   path: '/cad',
+    //   component: './Cad',
+    //   icon: 'https://water-service-test.oss-cn-hangzhou.aliyuncs.com/doc/contract/2023-07-31/3f72fccf-4f9c-4891-a6ec-f04fe4b1d9a2.png',
+    // },
+    // {
+    //   name: 'CAD详情',
+    //   path: '/cad/detail',
+    //   component: './Cad/detail',
+    //   hideInMenu: true,
+    // },
   ],
   npmClient: 'yarn',
 });

src/components/AuditForm/FormulaModal.js

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useState } from 'react';
+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([]);
+
+  useEffect(() => {
+    if (!visible) setFormula([]);
+    if (item?.props) setFormula(item.props.formula || []);
+  }, [visible, item]);
+
+  const value = useMemo(() => {
+    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
+      title="编辑计算公式"
+      open={visible}
+      onCancel={onCancel}
+      onOk={() => {
+        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, idx) => (
+          <span
+            style={{
+              padding: '6px 10px',
+              border: '1px solid #e5e5e5',
+              borderRadius: '2px',
+              marginRight: '10px',
+            }}
+            onClick={() => handlerChange(FormulaType.Filed, item)}
+          >
+            {item.props.label}
+          </span>
+        ))}
+      </div>
+      <div style={{ margin: '0 20px 20px 0' }}>
+        计算符号：
+        {symbolList.map((item, idx) => (
+          <span
+            style={{
+              padding: '6px 10px',
+              border: '1px solid #e5e5e5',
+              borderRadius: '2px',
+              marginRight: '10px',
+            }}
+            onClick={() => handlerChange(FormulaType.Symbol, item)}
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+      <div style={{ margin: '0 20px 20px 0' }}>
+        数字键盘：
+        {numberList.map((item, idx) => (
+          <span
+            style={{
+              padding: '6px 10px',
+              border: '1px solid #e5e5e5',
+              borderRadius: '2px',
+              marginRight: '10px',
+            }}
+            onClick={() => handlerChange(FormulaType.Number, item)}
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+    </Modal>
+  );
+};
+export default FormulaModal;

src/components/AuditForm/ItemAttribute.js

@@ -3,8 +3,8 @@ import React, { useMemo, useState, useEffect } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 
 function ItemAttribute(props) {
-  const { item, onChange, onRelClick } = props;
-
+  const { item, onChange, onRelClick, onFormulaClick } = props;
+  console.log(item);
   if (!item) return null;
   const renderForm = () => {
     let FormContent;
@@ -65,6 +65,11 @@ function ItemAttribute(props) {
       case 'CodeField':
         FormContent = <CodeField {...formProps} />;
         break;
+      case 'FormulaField':
+        FormContent = (
+          <FormulaField {...formProps} onFormulaClick={onFormulaClick} />
+        );
+        break;
     }
 
     return FormContent;
@@ -590,3 +595,35 @@ function TableName(props) {
     </Form>
   );
 }
+
+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}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      autoComplete="off"
+      initialValues={item.props}
+      onFinish={(values) => onFinish({ ...item.props, ...values })}
+    >
+      <Form.Item label="标题" name="label">
+        <Input />
+      </Form.Item>
+      <Form.Item label="提示文字" name="placeholder">
+        <Input />
+      </Form.Item>
+      <Form.Item label="计算公式">
+        <Input value={value} onClick={onFormulaClick} />
+      </Form.Item>
+      <Form.Item label="必填" name="required" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+      {btns}
+    </Form>
+  );
+}

src/components/AuditForm/constant.js

@@ -13,6 +13,7 @@ import {
   SolutionOutlined,
   NumberOutlined,
   TableOutlined,
+  LaptopOutlined,
 } from '@ant-design/icons';
 
 export const COMPONENT_LIST = [
@@ -150,4 +151,13 @@ export const COMPONENT_LIST = [
       required: false,
     },
   },
+  {
+    componentName: 'FormulaField',
+    icon: <LaptopOutlined />,
+    props: {
+      label: '计算公式',
+      placeholder: '自动计算数值',
+      required: false,
+    },
+  },
 ];

src/components/AuditForm/index.js

@@ -5,6 +5,7 @@ import ItemAttribute from './ItemAttribute';
 import { uuidv4 } from '@antv/xflow';
 import { Button } from 'antd';
 import RelModal from './RelModal';
+import FormulaModal from './FormulaModal';
 
 function AuditForm(props) {
   const { value, onChange } = props;
@@ -14,9 +15,12 @@ function AuditForm(props) {
   const [visible, setVisible] = useState(false);
 
   const [relVisible, setRelVisible] = useState(false); //关联选项弹窗
+  const [forVisible, setForVisible] = useState(false); //计算公式弹窗
   const [addToTable, setAddToTable] = useState(false);
   const [currentTableID, setCurrentTableID] = useState('');
 
+  console.log('-----------------', formList);
+
   const handleAddItem = (item) => {
     if (addToTable) {
       // 新增列处理
@@ -163,9 +167,11 @@ function AuditForm(props) {
           list={formList}
         ></FormContent>
         <ItemAttribute
+          formList={formList}
           key={selectList[selectList.length - 1]}
           item={findFormItem()}
           onRelClick={() => setRelVisible(true)}
+          onFormulaClick={() => setForVisible(true)}
           onChange={onChangeAttribute}
         ></ItemAttribute>
       </div>
@@ -188,6 +194,18 @@ function AuditForm(props) {
           onChangeAttribute(value);
         }}
       />
+      <FormulaModal
+        item={formList.find((item) => item.props.id === select)}
+        numFiledList={formList.filter(
+          (item) => item.componentName == 'NumberField',
+        )}
+        visible={forVisible}
+        onCancel={() => setForVisible(false)}
+        onChange={(value) => {
+          setForVisible(false);
+          onChangeAttribute(value);
+        }}
+      />
     </div>
   );
 }

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

src/pages/Home/index.js

@@ -85,6 +85,7 @@ function HomePage(props) {
       },
       Icon: require('@/assets/UnityMenu/system.png'),
     },
+
     {
       id: 9,
       name: '个人中心',
@@ -94,6 +95,15 @@ function HomePage(props) {
       },
       Icon: require('@/assets/UnityMenu/userCenter.png'),
     },
+    // {
+    //   id: 10,
+    //   name: 'cad管理',
+    //   active: true,
+    //   click: () => {
+    //     navigate('/cad');
+    //   },
+    //   Icon: require('@/assets/UnityMenu/cad.png'),
+    // },
   ];
   return (
     <div className={menuStyle.background}>