@bit-sun/business-component 2.4.19 → 2.4.21

package/src/components/Solution/RuleComponent/Formula.tsx

@@ -1,335 +1,335 @@
-import { Button, Modal, Row, Col, Input, message, Divider } from 'antd';
-import React, { useState, useEffect } from 'react';
-import { CloseCircleOutlined } from '@ant-design/icons';
-import {
-  SortableContainer,
-  SortableElement,
-} from 'react-sortable-hoc';
-import { arrayMoveImmutable } from 'array-move';
-
-const App = ({ setValue, formula, record, sourceData, disabled }: {
-  setValue: any,
-  record: any,
-  sourceData: any,
-  formula?: any,
-  disabled?: boolean
-}) => {
-  const [formul, setFormul] = useState(record.expression);
-  const [state, UpdateState] = useState([]);
-  const [fieldList, UpdateFiedList] = useState([]);
-  const [isStaticNumber, setIsStaticNumber] = useState(false);
-
-  useEffect(() => {
-    if (sourceData) {
-      setInitialData(sourceData);
-      return;
-    }
-  }, [sourceData]);
-
-  const setInitialData = (fieldData: any) => {
-    UpdateFiedList(fieldData);
-    let res: any = [];
-    let handleResData: any = [];
-    fieldData.forEach((i: any) => {
-      if (i?.propertyList?.length) {
-        handleResData = handleResData.concat(i.propertyList);
-      }
-    });
-    formul &&
-      formul.replace(
-        /([a-zA-Z_]+\.\w+)|\+|\-|\*|\/|\(|\)|((\d+\.\d+)|\d+)/g,
-        (item: any) => {
-          const numberReg = new RegExp(/^\d+/);
-          if (numberReg.test(item)) {
-            res = res.concat([{ name: item, value: item }]);
-            return;
-          }
-          if (handleResData.filter((initem: any) => initem.value === item).length) {
-            res = res.concat(
-              handleResData.filter((initem: any) => initem.value === item),
-            );
-          } else {
-            res = res.concat(
-              ['+', '-', '*', '/', '(', ')']
-                .filter((initem) => initem === item)
-                .map((item) => ({ value: item, name: item })),
-            );
-          }
-        },
-      );
-    UpdateState(res);
-  };
-
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const showModal = () => {
-    setIsModalVisible(true);
-  };
-
-  const handleOk = () => {
-    setIsModalVisible(false);
-    let formulString = state
-      .map((item: any) => {
-        if (
-          ['+', '-', '*', '/', '(', ')'].indexOf(item.value) == -1 &&
-          typeof item.value != 'number'
-        ) {
-          return `{${item.value}}`;
-        }
-        return item.value;
-      })
-      .join('');
-    setFormul(formulString);
-    setValue(state, formatFormul(formulString));
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
-
-  const onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
-    UpdateState(arrayMoveImmutable(state, oldIndex, newIndex));
-  };
-
-  const deleteItem = (value: any, indexOrder: number) => {
-    UpdateState([].concat(state).filter((item, index) => index !== indexOrder));
-  };
-
-  const SortableItem = SortableElement(({ value, sortIndex }: {value: string, sortIndex: number}) => {
-    return (
-      <span
-        style={{
-          // height: '100px',
-          padding: '5px 10px',
-          margin: '10px',
-          height: '40px',
-          lineHeight: '30px',
-          flexBasis: '1',
-          border: '1px solid #e8eaee',
-          borderRadius: '5px',
-          cursor: 'pointer',
-        }}
-      >
-        {value} &nbsp;{' '}
-        <CloseCircleOutlined
-          onClick={(e) => {
-            deleteItem(value, sortIndex);
-          }}
-        />
-      </span>
-    );
-  });
-
-  const SortableList = SortableContainer(({ items }: any) => {
-    return (
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        {items.map((value: any, index: any) => (
-          <>
-            {/* @ts-ignore */}
-            <SortableItem key={`item-${value.value}`} sortIndex={index} index={index} value={value.name} />
-          </>
-        ))}
-      </div>
-    );
-  });
-
-  const add = (item: any) => {
-    {/* @ts-ignore */}
-    UpdateState([...state, item]);
-  };
-
-  const formatFormul = (formulaString?: string) => {
-    let tempFormulaString = formulaString || formul;
-    if (!fieldList.length || !tempFormulaString) return '';
-    let flattedFieldList: any = [];
-    fieldList.forEach((i: any) => {
-      if (i?.propertyList?.length) {
-        flattedFieldList = flattedFieldList.concat(i.propertyList);
-      }
-    });
-    let res = tempFormulaString.replace(/[a-zA-Z_]+\.\w+/g, (item: any) => {
-      // 支持固定值也就是数字，所以排除了数字
-      return flattedFieldList.filter((inneritem: any) => inneritem.value === item)[0]
-        ?.name;
-    });
-    return res.replace(/(\{|\})/g, '');
-  };
-
-  return (
-    <>
-      <>
-        <Input value={formatFormul()} style={{ width: '540px' }} disabled />
-        <Button type="primary" onClick={showModal} disabled={disabled}>
-          编辑表达式
-        </Button>
-        <Modal
-          title="编辑表达式"
-          visible={isModalVisible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-          width={1000}
-        >
-          <div style={{ height: '600px' }}>
-            <Row>
-              <Col span={6}>
-                <div
-                  style={{
-                    border: '1px solid #e8eaee',
-                    padding: '10px',
-                    borderRadius: '5px',
-                    overflow: 'auto',
-                    maxHeight: '600px',
-                  }}
-                >
-                  {[...fieldList].map((item: any) => (
-                    <div key={item.id}>
-                      <div style={{ fontWeight: 'bolder', fontSize: '14px' }}>
-                        {item.name}
-                      </div>
-                      <div
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-around',
-                          flexWrap: 'wrap',
-                        }}
-                      >
-                        {(item?.propertyList || []).map((s: any) => (
-                          <span
-                            key={`${item.id}${s.id}`}
-                            onClick={() => {
-                              add(s);
-                            }}
-                            style={{
-                              width: '80px',
-                              // height: '100px',
-                              padding: '10px',
-                              margin: '10px 0px',
-                              flexBasis: '1',
-                              border: '1px solid #e8eaee',
-                              borderRadius: '5px',
-                              cursor: 'pointer',
-                            }}
-                          >
-                            {s.name}
-                          </span>
-                        ))}
-                      </div>
-                      <Divider />
-                    </div>
-                  ))}
-                </div>
-              </Col>
-              <Col span={18}>
-                表达式
-                <Row>
-                  <div>
-                    {['+', '-', '*', '/', '(', ')'].map((item) => (
-                      <span
-                        onClick={() => {
-                          add({ name: item, value: item });
-                        }}
-                        style={{
-                          width: '50px',
-                          textAlign: 'center',
-                          display: 'inline-block',
-                          padding: '5px 10px',
-                          margin: '10px',
-                          height: '40px',
-                          lineHeight: '30px',
-                          flexBasis: '1',
-                          border: '1px solid #e8eaee',
-                          borderRadius: '5px',
-                          cursor: 'pointer',
-                        }}
-                      >
-                        {item}
-                      </span>
-                    ))}
-                    <span
-                      onClick={(e) => {
-                        setIsStaticNumber(!isStaticNumber);
-                      }}
-                      style={{
-                        width: isStaticNumber ? '110px' : '65px',
-                        textAlign: 'center',
-                        display: 'inline-block',
-                        padding: '5px 10px',
-                        margin: '10px',
-                        height: '40px',
-                        lineHeight: '30px',
-                        flexBasis: '1',
-                        border: '1px solid #e8eaee',
-                        borderRadius: '5px',
-                        cursor: 'pointer',
-                      }}
-                    >
-                      {isStaticNumber ? (
-                        <Input
-                          autoFocus={true}
-                          onClick={(e) => e.stopPropagation()}
-                          onPressEnter={(e: any) => {
-                            const value = Number(e.target.value);
-                            if (Object.is(value, NaN)) {
-                              message.warn('包含非数字');
-                              return;
-                            }
-                            if (value < 0) {
-                              message.warn('不支持负数，请使用减号');
-                              return;
-                            }
-                            if (!value) {
-                              setIsStaticNumber(false);
-                              return;
-                            }
-                            add({ name: value, value: e.target.value });
-                            setIsStaticNumber(false);
-                          }}
-                          onBlur={(e) => {
-                            const value = Number(e.target.value);
-                            if (Object.is(value, NaN)) {
-                              message.warn('包含非数字');
-                              return;
-                            }
-                            if (value < 0) {
-                              message.warn('不支持负数，请使用减号');
-                              return;
-                            }
-                            if (!value) {
-                              setIsStaticNumber(false);
-                              return;
-                            }
-                            add({ name: value, value: e.target.value });
-                            setIsStaticNumber(false);
-                          }}
-                        />
-                      ) : (
-                        '固定值'
-                      )}
-                    </span>
-                  </div>
-                </Row>
-                <Row>
-                  <div
-                    style={{
-                      width: '700px',
-                      padding: '10px',
-                      marginLeft: '10px',
-                      flexBasis: '1',
-                      border: '1px solid #e8eaee',
-                      minHeight: '560px',
-                    }}
-                  >
-                    {/* @ts-ignore */}
-                    <SortableList distance={20} helperClass="row-dragging" items={state} axis="xy" onSortEnd={onSortEnd} />
-                  </div>
-                </Row>
-              </Col>
-            </Row>
-          </div>
-        </Modal>
-      </>
-    </>
-  );
-};
-
-export default App;
+import { Button, Modal, Row, Col, Input, message, Divider } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import {
+  SortableContainer,
+  SortableElement,
+} from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+
+const App = ({ setValue, formula, record, sourceData, disabled }: {
+  setValue: any,
+  record: any,
+  sourceData: any,
+  formula?: any,
+  disabled?: boolean
+}) => {
+  const [formul, setFormul] = useState(record.expression);
+  const [state, UpdateState] = useState([]);
+  const [fieldList, UpdateFiedList] = useState([]);
+  const [isStaticNumber, setIsStaticNumber] = useState(false);
+
+  useEffect(() => {
+    if (sourceData) {
+      setInitialData(sourceData);
+      return;
+    }
+  }, [sourceData]);
+
+  const setInitialData = (fieldData: any) => {
+    UpdateFiedList(fieldData);
+    let res: any = [];
+    let handleResData: any = [];
+    fieldData.forEach((i: any) => {
+      if (i?.propertyList?.length) {
+        handleResData = handleResData.concat(i.propertyList);
+      }
+    });
+    formul &&
+      formul.replace(
+        /([a-zA-Z_]+\.\w+)|\+|\-|\*|\/|\(|\)|((\d+\.\d+)|\d+)/g,
+        (item: any) => {
+          const numberReg = new RegExp(/^\d+/);
+          if (numberReg.test(item)) {
+            res = res.concat([{ name: item, value: item }]);
+            return;
+          }
+          if (handleResData.filter((initem: any) => initem.value === item).length) {
+            res = res.concat(
+              handleResData.filter((initem: any) => initem.value === item),
+            );
+          } else {
+            res = res.concat(
+              ['+', '-', '*', '/', '(', ')']
+                .filter((initem) => initem === item)
+                .map((item) => ({ value: item, name: item })),
+            );
+          }
+        },
+      );
+    UpdateState(res);
+  };
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+    let formulString = state
+      .map((item: any) => {
+        if (
+          ['+', '-', '*', '/', '(', ')'].indexOf(item.value) == -1 &&
+          typeof item.value != 'number'
+        ) {
+          return `{${item.value}}`;
+        }
+        return item.value;
+      })
+      .join('');
+    setFormul(formulString);
+    setValue(state, formatFormul(formulString));
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
+    UpdateState(arrayMoveImmutable(state, oldIndex, newIndex));
+  };
+
+  const deleteItem = (value: any, indexOrder: number) => {
+    UpdateState([].concat(state).filter((item, index) => index !== indexOrder));
+  };
+
+  const SortableItem = SortableElement(({ value, sortIndex }: {value: string, sortIndex: number}) => {
+    return (
+      <span
+        style={{
+          // height: '100px',
+          padding: '5px 10px',
+          margin: '10px',
+          height: '40px',
+          lineHeight: '30px',
+          flexBasis: '1',
+          border: '1px solid #e8eaee',
+          borderRadius: '5px',
+          cursor: 'pointer',
+        }}
+      >
+        {value} &nbsp;{' '}
+        <CloseCircleOutlined
+          onClick={(e) => {
+            deleteItem(value, sortIndex);
+          }}
+        />
+      </span>
+    );
+  });
+
+  const SortableList = SortableContainer(({ items }: any) => {
+    return (
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        {items.map((value: any, index: any) => (
+          <>
+            {/* @ts-ignore */}
+            <SortableItem key={`item-${value.value}`} sortIndex={index} index={index} value={value.name} />
+          </>
+        ))}
+      </div>
+    );
+  });
+
+  const add = (item: any) => {
+    {/* @ts-ignore */}
+    UpdateState([...state, item]);
+  };
+
+  const formatFormul = (formulaString?: string) => {
+    let tempFormulaString = formulaString || formul;
+    if (!fieldList.length || !tempFormulaString) return '';
+    let flattedFieldList: any = [];
+    fieldList.forEach((i: any) => {
+      if (i?.propertyList?.length) {
+        flattedFieldList = flattedFieldList.concat(i.propertyList);
+      }
+    });
+    let res = tempFormulaString.replace(/[a-zA-Z_]+\.\w+/g, (item: any) => {
+      // 支持固定值也就是数字，所以排除了数字
+      return flattedFieldList.filter((inneritem: any) => inneritem.value === item)[0]
+        ?.name;
+    });
+    return res.replace(/(\{|\})/g, '');
+  };
+
+  return (
+    <>
+      <>
+        <Input value={formatFormul()} style={{ width: '540px' }} disabled />
+        <Button type="primary" onClick={showModal} disabled={disabled}>
+          编辑表达式
+        </Button>
+        <Modal
+          title="编辑表达式"
+          visible={isModalVisible}
+          onOk={handleOk}
+          onCancel={handleCancel}
+          width={1000}
+        >
+          <div style={{ height: '600px' }}>
+            <Row>
+              <Col span={6}>
+                <div
+                  style={{
+                    border: '1px solid #e8eaee',
+                    padding: '10px',
+                    borderRadius: '5px',
+                    overflow: 'auto',
+                    maxHeight: '600px',
+                  }}
+                >
+                  {[...fieldList].map((item: any) => (
+                    <div key={item.id}>
+                      <div style={{ fontWeight: 'bolder', fontSize: '14px' }}>
+                        {item.name}
+                      </div>
+                      <div
+                        style={{
+                          display: 'flex',
+                          justifyContent: 'space-around',
+                          flexWrap: 'wrap',
+                        }}
+                      >
+                        {(item?.propertyList || []).map((s: any) => (
+                          <span
+                            key={`${item.id}${s.id}`}
+                            onClick={() => {
+                              add(s);
+                            }}
+                            style={{
+                              width: '80px',
+                              // height: '100px',
+                              padding: '10px',
+                              margin: '10px 0px',
+                              flexBasis: '1',
+                              border: '1px solid #e8eaee',
+                              borderRadius: '5px',
+                              cursor: 'pointer',
+                            }}
+                          >
+                            {s.name}
+                          </span>
+                        ))}
+                      </div>
+                      <Divider />
+                    </div>
+                  ))}
+                </div>
+              </Col>
+              <Col span={18}>
+                表达式
+                <Row>
+                  <div>
+                    {['+', '-', '*', '/', '(', ')'].map((item) => (
+                      <span
+                        onClick={() => {
+                          add({ name: item, value: item });
+                        }}
+                        style={{
+                          width: '50px',
+                          textAlign: 'center',
+                          display: 'inline-block',
+                          padding: '5px 10px',
+                          margin: '10px',
+                          height: '40px',
+                          lineHeight: '30px',
+                          flexBasis: '1',
+                          border: '1px solid #e8eaee',
+                          borderRadius: '5px',
+                          cursor: 'pointer',
+                        }}
+                      >
+                        {item}
+                      </span>
+                    ))}
+                    <span
+                      onClick={(e) => {
+                        setIsStaticNumber(!isStaticNumber);
+                      }}
+                      style={{
+                        width: isStaticNumber ? '110px' : '65px',
+                        textAlign: 'center',
+                        display: 'inline-block',
+                        padding: '5px 10px',
+                        margin: '10px',
+                        height: '40px',
+                        lineHeight: '30px',
+                        flexBasis: '1',
+                        border: '1px solid #e8eaee',
+                        borderRadius: '5px',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      {isStaticNumber ? (
+                        <Input
+                          autoFocus={true}
+                          onClick={(e) => e.stopPropagation()}
+                          onPressEnter={(e: any) => {
+                            const value = Number(e.target.value);
+                            if (Object.is(value, NaN)) {
+                              message.warn('包含非数字');
+                              return;
+                            }
+                            if (value < 0) {
+                              message.warn('不支持负数，请使用减号');
+                              return;
+                            }
+                            if (!value) {
+                              setIsStaticNumber(false);
+                              return;
+                            }
+                            add({ name: value, value: e.target.value });
+                            setIsStaticNumber(false);
+                          }}
+                          onBlur={(e) => {
+                            const value = Number(e.target.value);
+                            if (Object.is(value, NaN)) {
+                              message.warn('包含非数字');
+                              return;
+                            }
+                            if (value < 0) {
+                              message.warn('不支持负数，请使用减号');
+                              return;
+                            }
+                            if (!value) {
+                              setIsStaticNumber(false);
+                              return;
+                            }
+                            add({ name: value, value: e.target.value });
+                            setIsStaticNumber(false);
+                          }}
+                        />
+                      ) : (
+                        '固定值'
+                      )}
+                    </span>
+                  </div>
+                </Row>
+                <Row>
+                  <div
+                    style={{
+                      width: '700px',
+                      padding: '10px',
+                      marginLeft: '10px',
+                      flexBasis: '1',
+                      border: '1px solid #e8eaee',
+                      minHeight: '560px',
+                    }}
+                  >
+                    {/* @ts-ignore */}
+                    <SortableList distance={20} helperClass="row-dragging" items={state} axis="xy" onSortEnd={onSortEnd} />
+                  </div>
+                </Row>
+              </Col>
+            </Row>
+          </div>
+        </Modal>
+      </>
+    </>
+  );
+};
+
+export default App;