@bit-sun/business-component 2.1.23 → 2.2.0

package/src/components/Business/JsonQueryTable/components/FieldsSettingsTable.tsx

@@ -0,0 +1,202 @@
+import React, { useRef, useState } from 'react';
+import  BsSulaQueryTable  from './../../BsSulaQueryTable';
+import FieldsModifyModal from './FieldsModifyModal';
+import { inputType, choiceType, valueType } from "./../static"
+import _ from 'lodash';
+
+// @ts-nocheck
+export default (props:any)=>{
+  const { 
+    businessType, 
+    fieldGroup='', 
+    codeProps='', 
+    moduleType, 
+    moduleRelationId, 
+  } = props;
+  
+  const ref = useRef(null);
+  const [fieldsModify, setFieldsModify] = useState({
+    visible: false,
+    inputType,
+    choiceType,
+    valueType,
+    title: '',
+    lineDetail:{},
+    mode: 'create',
+    record: {},
+    onParentOk: () => {
+      // @ts-ignore
+      ref?.current?.tableRef?.current?.refreshTable();
+      fieldsModify.onCancel();
+    },
+    onCancel: () =>
+      setFieldsModify({
+        ...fieldsModify,
+        visible: false,
+      }),
+  });
+  const searchableFlag = codeProps?.columns?true:false; //列表只查询 查询项为是得自定义字段
+  
+  const renderTrueOrFalse = [
+    {
+      type: 'text',
+      props: {
+        children: '#{text ? "是" : "否" }',
+      },
+    },
+  ];
+
+  const tableConfig = {
+    needPageHeader: false,
+    noConditionOpts: true,
+    remoteDataSource: {
+      url: `/basic/flow/businessField?sorter=asc-priority&qp-businessType-eq=${businessType}&qp-fieldGroup-eq=${fieldGroup}`+(searchableFlag?`&qp-searchableFlag-eq=true`:''),
+      convertParams: 'bs-tableConvertParamsType',
+      converter: 'bs-tableConvertType',
+    },
+    actionsRender: [
+      {
+        type: 'button',
+        props: {
+          children: '新增',
+          type: 'primary',
+        },
+        action: () => {
+          setFieldsModify({
+            ...fieldsModify,
+            visible: true,
+            record: {
+              fieldGroup,
+              businessType,
+            },
+            lineDetail: {},
+            mode: 'create',
+            title: `新增字段`,
+          });
+        }
+      },
+    ],
+    fields: [
+      {
+        name: 'qp-name-like',
+        label: '字段名称',
+        field: 'input',
+      },
+    ],
+    columns: [
+      {
+        key: 'code',
+        title: '字段编号',
+        width: 75
+      },
+      {
+        key: 'name',
+        title: '字段名称',
+        width: 100
+      },
+      {
+        key: 'code',
+        title: '是否使用',
+        width: 70,
+        render: ({text}:any) => {
+          const jsonEditorVal=localStorage.getItem('jsonEditorVal')||'';
+          console.log('jsonEditorVal',jsonEditorVal);
+          return jsonEditorVal.indexOf(text) >= 0 ? '是' : "否"
+        }
+      },
+      {
+        key: 'code',
+        title: '代码片段',
+        render: ({text,record}:any) => {
+          if (!codeProps.columns) {
+            return <div>表单：{`{"name": "extensionFields,${record.code}","label": "${record.name}"},`}</div>
+          }
+          return (
+            <>
+              <div>列表：{`{"key": "extensionFields,${record.code}","title": "${record.name}"},`}</div>
+              <div>表单：{`{"name": "extensionFields,${record.code}","label": "${record.name}"},`}</div>
+            </>
+          ) 
+        },
+      },
+      {
+        key: 'requiredFlag',
+        title: '是否必填',
+        render: renderTrueOrFalse,
+        width: 70
+      },
+      {
+        key: 'searchableFlag',
+        title: '是否查询项',
+        render: renderTrueOrFalse,
+        width: 80
+      },
+      {
+        key: 'inputType',
+        title: '显示类型',
+        render: ({ text }: any) => {
+          return inputType[text] || '- -'
+        } ,
+        width: 80
+      },
+      {
+        key: 'valueType',
+        title: '字段类型',
+        render: ({ text }: any) => valueType[text] || '- -',
+        width: 80
+      },
+      {
+        key: 'operation',
+        title: '操作',
+        render: [
+          {
+            type: 'link',
+            props: {
+              children: '编辑',
+            },
+            action: ({ record: rec }: any) => {
+              setFieldsModify({
+                ...fieldsModify,
+                visible: true,
+                mode: 'edit',
+                lineDetail: { 
+                  moduleType,
+                  moduleRelationId 
+                },
+                title: `编辑字段`,
+                record: rec,
+              });
+            },
+          },
+          {
+            type: 'link',
+            props: {
+              children: '删除',
+              danger: true,
+            },
+            action: [
+              {
+                url: `/basic/flow/businessField`,
+                method: 'DELETE',
+                data: {
+                  id: '#{record.id}',
+                },
+                successMessage: '删除成功！',
+              },
+              'refreshTable',
+            ],
+          },
+        ],
+      },
+    ],
+    size: "small",
+    tableCode: "customerFieldsTable" 
+  };
+
+  return (
+    <>
+      <BsSulaQueryTable {...tableConfig} forwardedRef={ref} />
+      {fieldsModify.visible && <FieldsModifyModal {...fieldsModify} />}
+    </>
+  )
+}

package/src/components/Business/JsonQueryTable/components/Formula.tsx

@@ -0,0 +1,205 @@
+import { Button, Modal, Row, Col, Input } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+import { ModalForm, request } from 'bssula';
+
+
+const App = ({
+  record,
+  setValue,
+  formula
+}:{
+  record:any,
+  setValue:any,
+  formula:any,
+}) => {
+  const [formul, setFormul] = useState(record.formula)
+  const [state, UpdateState]:any = useState([])
+  const [fieldList, UpdateFiedList] = useState([])
+
+  useEffect(() => {
+    request({
+      url: '/basic/flow/businessField/listNoPage',
+      params: {
+        'qp-businessType-eq': record.businessType,
+        'qp-fieldGroup-eq': record.fieldGroup,
+      },
+      converter: ({ response, data }:any) => {
+        if (response.code === '000000') {
+          // UpdateFiedList(data.filter(item => item.valueType == 20 || item.valueType == 21 || item.valueType == 22))
+          const resData = data.filter((item:any) => item.inputType != 40 && (item.valueType == 20 || item.valueType == 21 || item.valueType == 22)).map((item:any) => ({value: item.code, name: item.name}))
+          UpdateFiedList(resData)
+          let res:any = [];
+          formul && formul.replace(/(\w+|\+|\-|\*|\/|\(|\))/g, (item:any) => {
+            if (resData.filter((initem:any) => initem.value === item).length) {
+              res = res.concat(resData.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);
+    setValue(state);
+    setFormul(state.map((item:any) => {
+      if (['+', '-', '*', '/', '(', ')'].indexOf(item.value) == -1) {
+        return `{${item.value}}`
+      }
+      return item.value;
+    }).join(''))
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+
+  const onSortEnd = ({ oldIndex, newIndex }:any) => {
+    UpdateState(arrayMoveImmutable(state, oldIndex, newIndex))
+  };
+
+  const deleteItem = (value:any, indexOrder:any) => {
+    UpdateState([].concat(state).filter((item, index) => index !== indexOrder))
+
+  }
+
+  const SortableItem = SortableElement(({ value, sortIndex }:any) => {
+    debugger
+    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) => {
+    UpdateState([...state, item])
+  })
+
+  const formatFormul = () => {
+    if (!fieldList.length || !formul) return '';
+    let res = formul.replace(/\w+/g, (item:any) => {
+      // @ts-ignore
+      return fieldList.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}>
+          编辑表达式
+        </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',
+                  display: 'flex',
+                  justifyContent: 'space-around',
+                  borderRadius: '5px',
+                  flexWrap: 'wrap',
+                  overflow: 'auto',
+                  maxHeight: '600px'
+                }}
+                >
+                  {[...fieldList].map((item:any) => (
+                    <span onClick={() => { add(item) }} style={{
+                      width: '80px',
+                      // height: '100px',
+                      padding: '10px',
+                      margin: '10px 0px',
+                      flexBasis: '1',
+                      border: '1px solid #e8eaee',
+                      borderRadius: '5px',
+                      cursor: 'pointer',
+                    }}>{item.name}</span>
+                  ))}
+                </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>)}
+                  </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/Business/JsonQueryTable/components/MaintainOptions.tsx

@@ -0,0 +1,127 @@
+import React, { useRef } from 'react';
+import { Button, Input, Modal } from 'antd';
+import { Table } from 'bssula';
+import { uuid } from '@/utils/utils';
+
+export default (props: any) => {
+  const tableRef:any = useRef(null);
+  const { onParentOk, record } = props;
+  const config = {
+    initialDataSource:
+      Object.keys(record.choiceInfo || {})?.map((d: any) => ({
+        text: record.choiceInfo[d],
+        value: d,
+        id: uuid(),
+      })) || [],
+    columns: [
+      {
+        key: 'value',
+        title: '值',
+        render: ({ text, record }: any) => {
+          return (
+            <Input
+              onChange={(e) => {
+                record['value'] = e.target.value;
+              }}
+              value={text}
+            />
+          );
+        },
+      },
+      {
+        key: 'text',
+        title: '文本',
+        render: ({ record, text }: any) => {
+          return (
+            <Input
+              onChange={(e) => {
+                record['text'] = e.target.value;
+              }}
+              value={text}
+            />
+          );
+        },
+      },
+      {
+        key: 'operation',
+        title: '操作',
+        render: [
+          {
+            type: 'link',
+            props: {
+              children: '删除',
+            },
+            action: ({ record, table }: any) => {
+              table.setDataSource(
+                table.getDataSource().filter((d: any) => d.id !== record.id),
+              );
+            },
+          },
+        ],
+      },
+    ],
+    rowKey: 'id',
+    onChange: (pag:any) => {
+      tableRef?.current?.setPagination(pag);
+    },
+    footer: () => {
+      return (
+        <div>
+          <Button
+            type={'primary'}
+            onClick={() => {
+              const data = tableRef?.current?.getDataSource();
+              tableRef?.current?.setDataSource([
+                ...data,
+                {
+                  id: uuid(),
+                },
+              ]);
+            }}
+          >
+            添加一行
+          </Button>
+          <Button
+            onClick={() => {
+              const data = tableRef?.current?.getDataSource();
+              tableRef?.current?.setDataSource([
+                ...data,
+                {
+                  id: uuid(),
+                },
+                {
+                  id: uuid(),
+                },
+                {
+                  id: uuid(),
+                },
+                {
+                  id: uuid(),
+                },
+                {
+                  id: uuid(),
+                },
+              ]);
+            }}
+          >
+            添加五行
+          </Button>
+        </div>
+      );
+    },
+  };
+  return (
+    <Modal
+      {...props}
+      maskClosable={false}
+      onOk={() => {
+        onParentOk(
+          tableRef?.current?.getDataSource().filter((d: any) => d.text && d.value),
+        );
+      }}
+    >
+      <Table {...config} style={{ width: '500px' }} ref={tableRef} />
+    </Modal>
+  );
+};
+

package/src/components/Business/JsonQueryTable/configButton/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Affix, Button } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+
+export default props => {
+  const { onClick } = props;
+
+  const style = { position: 'fixed', top: 360, right: 24, zIndex: 1001 };
+
+  return (
+    <Affix style={style}>
+      <Button
+        style={{ width: 50, height: 50, lineHeight: '57px' }}
+        icon={<SettingOutlined style={{ fontSize: 30 }} />}
+        type="primary"
+        onClick={onClick}
+      />
+    </Affix>
+  );
+};

package/src/components/Business/JsonQueryTable/configTree/component/compactArrayView.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const prefixCls = 'tree-compact';
+
+export default class CompactArrayView extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.array.length !== this.props.array.length;
+  }
+
+  render() {
+    let { array } = this.props;
+    let count = array.length;
+
+    if (count === 0) {
+      return <span>{'[ ]'}</span>;
+    }
+    return (
+      <span className={prefixCls}>
+        <span>{'['}</span>
+        <span>{count + ' element' + (count > 1 ? 's' : '')}</span>
+        <span>{']'}</span>
+      </span>
+    );
+  }
+}

package/src/components/Business/JsonQueryTable/configTree/component/compactObjectView.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const prefixCls = 'tree-compact';
+
+export default class CompactObjectView extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    const nextLength = Object.keys(nextProps.object).length;
+    const prevLength = Object.keys(this.props.object).length;
+    return nextLength !== prevLength;
+  }
+
+  render() {
+    let keys = this.props.object.map(v => v.name);
+    let count = keys.length;
+
+    if (count === 0) {
+      return <span>{'{ }'}</span>;
+    }
+    if (count > 2) {
+      keys = keys.slice(0, 2).concat([`... +${count - 2}`]);
+    }
+    return (
+      <span className={prefixCls}>
+        <span>{'{'}</span>
+        <span>{keys.join(', ')}</span>
+        <span>{'}'}</span>
+      </span>
+    );
+  }
+}

package/src/components/Business/JsonQueryTable/configTree/index.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import castArray from 'lodash/castArray';
+import createTreeData, { getConfigNode } from './parser';
+import { createHighLightTreeData, clearActiveNode } from './parser/highlight';
+import TreeNode from './treeNode';
+import iconRender from './render/iconRender';
+import nameRender from './render/nameRender';
+
+import './index.less';
+
+export { iconRender, nameRender };
+
+function parseData(data) {
+  let res;
+  try {
+    res = createTreeData(getConfigNode(data));
+  } catch (e) {}
+
+  return res;
+}
+
+export default props => {
+  const {
+    data,
+    onToggle,
+    onSelect,
+    nameRender,
+    iconRender,
+    contextMenuRender,
+    style,
+    level = 0,
+    currentLine,
+  } = props;
+  const [treeData, setTreeData] = useState(parseData(data));
+  const [activeLine, setActiveLine] = useState(-1);
+
+  useEffect(() => {
+    setTreeData(parseData(data));
+  }, [data]);
+
+  useEffect(() => {
+    if (!treeData || !treeData[0]) {
+      setActiveLine(-1);
+    } else {
+      setActiveLine(currentLine);
+    }
+  }, [treeData, currentLine]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setTreeData(createHighLightTreeData(treeData, activeLine));
+    });
+  }, [activeLine]);
+
+  const handleSelect = (node, hasChildren) => {
+    const noActiveData = clearActiveNode(treeData);
+    setTreeData(noActiveData);
+    onSelect(node, hasChildren);
+  };
+
+  return (
+    <div className="si-tree" style={style}>
+      {castArray(treeData).map((node, index) => {
+        if (!node) return;
+
+        return (
+          <TreeNode
+            data={node}
+            onToggle={onToggle}
+            onSelect={handleSelect}
+            nameRender={nameRender}
+            iconRender={iconRender}
+            contextMenuRender={contextMenuRender}
+            key={node.name || index}
+            level={level}
+            activeLine={activeLine}
+          />
+        );
+      })}
+    </div>
+  );
+};