计算控件

src/components/AuditForm/FormulaModal.js

@@ -0,0 +1,84 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Divider, Input, Modal, Select, Table } from 'antd';
+
+const { TextArea } = Input;
+
+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 [data, setData] = useState([]);
+
+  const value = useMemo(() => {
+    return '计算公式=';
+  }, [formula]);
+
+  return (
+    <Modal
+      title="编辑计算公式"
+      open={visible}
+      onCancel={onCancel}
+      onOk={() => {
+        const linked = {};
+        data?.forEach((cur) => {
+          linked[cur.name] = cur.linked;
+        });
+        onChange?.({ linked });
+      }}
+      width={1000}
+      pagination={false}
+    >
+      <Divider />
+      <TextArea value={value} />
+      <div style={{ margin: '20px 20px 20px 0' }}>
+        计算对象：
+        {numFiledList.map((item) => (
+          <span
+            style={{
+              padding: '6px 10px',
+              border: '1px solid #e5e5e5',
+              borderRadius: '2px',
+              marginRight: '10px',
+            }}
+          >
+            {item.props.label}
+          </span>
+        ))}
+      </div>
+      <div style={{ margin: '0 20px 20px 0' }}>
+        计算对象：
+        {symbolList.map((item) => (
+          <span
+            style={{
+              padding: '6px 10px',
+              border: '1px solid #e5e5e5',
+              borderRadius: '2px',
+              marginRight: '10px',
+            }}
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+      <div style={{ margin: '0 20px 20px 0' }}>
+        数字键盘：
+        {numberList.map((item) => (
+          <span
+            style={{
+              padding: '6px 10px',
+              border: '1px solid #e5e5e5',
+              borderRadius: '2px',
+              marginRight: '10px',
+            }}
+          >
+            {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;
@@ -64,6 +64,11 @@ function ItemAttribute(props) {
       case 'CodeField':
         FormContent = <CodeField {...formProps} />;
         break;
+      case 'FormulaField':
+        FormContent = (
+          <FormulaField {...formProps} onFormulaClick={onFormulaClick} />
+        );
+        break;
     }
 
     return FormContent;
@@ -589,3 +594,32 @@ function TableName(props) {
     </Form>
   );
 }
+
+function FormulaField(props) {
+  const { item, btns, onFinish, onFormulaClick } = props;
+  const [form] = Form.useForm();
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      autoComplete="off"
+      initialValues={item.props}
+      onFinish={onFinish}
+    >
+      <Form.Item label="标题" name="label">
+        <Input />
+      </Form.Item>
+      <Form.Item label="提示文字" name="placeholder">
+        <Input />
+      </Form.Item>
+      <Form.Item label="计算公式">
+        <Input 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>
   );
 }