@bit-sun/business-component 2.2.49 → 2.3.1

package/src/components/Functional/BsAntdSula/index.ts

@@ -0,0 +1,2 @@
+
+export { default as BsCascader } from './BsCascader'

package/src/components/Functional/EllipsisTooltip/index.d.ts

@@ -0,0 +1,5 @@
+export class EllipsisTooltip {
+  maxLength: number;
+  title: string;
+  style?: any
+}

package/src/components/Functional/EllipsisTooltip/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+class EllipsisTooltip extends React.Component {
+  state = {
+    visible: false,
+  };
+
+  handleVisibleChange = (visible) => {
+    if (this.props.title.length > this.props.maxLength) {
+      this.setState({
+        visible,
+      });
+    }
+  };
+
+  render() {
+    const style = {
+      ...this.props.style,
+    };
+
+    return (
+      <Tooltip
+        visible={this.state.visible}
+        onVisibleChange={this.handleVisibleChange}
+        title={this.props.title}
+      >
+        <div className="customEllipse" style={style}>
+          {this.props.showInfo && this.props.showInfo ||
+          (this.props.title.length > this.props.maxLength ? `${this.props.title.substring(0, this.props.maxLength)}...` : this.props.title)}
+        </div>
+      </Tooltip>
+    );
+  }
+}
+export default EllipsisTooltip;

package/src/components/Functional/EllipsisTooltip/index.md

@@ -0,0 +1,30 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 字符超长处理组件
+order: 6
+---
+
+## EllipsisTooltip
+
+字符超长处理组件
+
+```tsx
+import React, { useRef } from 'react';
+import { EllipsisTooltip } from '../../../index';
+
+export default () => {
+  
+  return (
+    <div>
+      <EllipsisTooltip maxLength={10} title={'一二三四五六七八九十十一十二十三'} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

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/index.d.ts

@@ -0,0 +1,29 @@
+export class RuleComponent {
+  /** regularDataList必填，规则模板配置的条件对象---可选对象树数据源 */
+  regularDataList: any;
+  /** operationList必填，可选操作符数据源 */
+  operationList: any;
+  /** ruleClassData必填，规则组件配置数据 */
+  ruleClassData: any;
+  /** callBack必填，数据交互 */
+  callBack: any;
+  /** systemVariableList选填，规则模板配置的变量--插入参数数据源 */
+  systemVariableList?:any;
+  /** initialThresholdQuery非必填，处理条件对象操作符后面框的数据源参数 */
+  initialThresholdQuery?: any;
+
+  /** ruleGroupInfo选填，当前规则实例所属规则模板-关联的规则组信息 */
+  ruleGroupInfo?: any
+  /** ruleTypeData选填，动作数据源 */
+  ruleTypeData?: any;
+  /** ruleTypeData选填，返回值数据源 */
+  ruleReturnConfig?: any;
+  /** handleOperatingAction非必填，onlyAction为true时 父子组件之间数据交互 */
+  handleOperatingAction?: any;
+
+  disabled?: boolean;
+  canDelete?: boolean;
+  onlyOneRule?: boolean;
+  onlyCondition?: boolean;
+  onlyAction?: boolean;
+}