@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

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

@@ -0,0 +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;

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

@@ -0,0 +1,62 @@
+import { getDictionarySource } from '@/utils/utils';
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { request as SulaRequest } from 'bssula';
+interface Iprops {
+  disabled: boolean;
+  inputType: number;
+  defaultValue: any;
+  styleCommon: any;
+  value: any;
+  onChange: any;
+  dictionaryCode?: string;
+}
+export default (props: Iprops) => {
+  const {
+    disabled,
+    inputType,
+    defaultValue,
+    styleCommon,
+    value,
+    onChange,
+    dictionaryCode,
+  } = props;
+  const [dataSource, setDataSource] = useState(getDictionarySource(dictionaryCode ?? '')?.map((item: any) => ({ ...item, label: item.text })) || [])
+
+  useEffect(() => {
+    if (!!dictionaryCode && !getDictionarySource(dictionaryCode)) {
+      SulaRequest({
+        url: `/basic/bscDictItem/allItemList?qp-code-eq=${dictionaryCode}`,
+        method: 'get',
+        converter: ({ data }: { data: { id: string; dictItemCode: string; dictItemName: string }[] }) => {
+          const dataList = data?.map?.((item) => ({
+            label: item.dictItemName,
+            value: item.dictItemCode,
+          })) || []
+          setDataSource(dataList)
+          return dataList;
+        },
+      });
+    }
+
+  }, [dictionaryCode])
+
+  return (
+    <Select
+      disabled={disabled}
+      {...(inputType === 30
+        ? {
+          mode: 'multiple',
+        }
+        : {})}
+      defaultValue={defaultValue}
+      style={styleCommon}
+      value={Array.isArray(value) ? value : (value as string)?.split(',')}
+      onChange={(changeValue: any) => {
+        onChange(changeValue);
+        // handleEdit(ites.code, value);
+      }}
+      options={dataSource}
+    />
+  );
+};