@bit-sun/business-component 2.1.23 → 2.2.0-alpha.1

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

@@ -0,0 +1,44 @@
+// hover background
+@hover-background: #1990ffab;
+
+.si-tree {
+  font-size: 14px;
+
+  &-node {
+    &-block {
+      display: flex;
+      align-items: center;
+      padding: 2px 4px;
+      cursor: pointer;
+      user-select: none;
+      &:hover {
+        background-color: @hover-background;
+        color: #fff;
+      }
+
+      &-actived {
+        background-color: @hover-background;
+        color: #fff;
+      }
+    }
+
+    &-switcher {
+      margin-right: 2px;
+    }
+
+    &-icon {
+      margin-right: 4px;
+      display: flex;
+    }
+
+    &-name {
+    }
+  }
+}
+
+.tree-compact {
+  margin-left: 4px;
+  font-size: 13px;
+  font-style: italic;
+  color: #49aa19;
+}

package/src/components/Business/JsonQueryTable/configTree/parser/highlight.js

@@ -0,0 +1,57 @@
+const isHightLight = (hightLightData, highLightLine) => {
+  const { children, loc = [0, 0, 0, 0] } = hightLightData;
+  const [lineStart, , lineEnd] = loc;
+  if (children) {
+    return isActiveObj(highLightLine, lineStart, lineEnd);
+  }
+  return lineStart <= highLightLine && lineEnd >= highLightLine;
+};
+
+const hasHighLightChildren = (hightLightData = {}, highLightLine) => {
+  const { children, loc = [0, 0, 0, 0] } = hightLightData;
+  const [lineStart, , lineEnd] = loc;
+  if (children) {
+    return (
+      isActiveObj(highLightLine, lineStart, lineEnd) ||
+      children.some(v => hasHighLightChildren(v, highLightLine))
+    );
+  }
+  return lineStart <= highLightLine && lineEnd >= highLightLine;
+};
+
+function isActiveObj(highLightLine, start, end) {
+  return highLightLine === start || highLightLine === end;
+}
+
+function createHighLightTreeData(treeData, highLightLine) {
+  const data = Array.isArray(treeData) ? [...treeData] : [treeData];
+
+  data.forEach(node => {
+    if (!node) return;
+    node.toggled = hasHighLightChildren(node, highLightLine);
+    node.active = isHightLight(node, highLightLine);
+    if (node.children) {
+      if (node.active) {
+        node.children = clearActiveNode(node.children);
+      } else {
+        node.children = createHighLightTreeData(node.children, highLightLine);
+      }
+    }
+  });
+
+  return data;
+}
+
+function clearActiveNode(treeData) {
+  const data = Array.isArray(treeData) ? [...treeData] : [treeData];
+  data.forEach(node => {
+    if (!node) return;
+    node.active = false;
+    if (node.children) {
+      node.children = clearActiveNode(node.children);
+    }
+  });
+  return data;
+}
+
+export { createHighLightTreeData, clearActiveNode };

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

@@ -0,0 +1,124 @@
+// @ts-nocheck
+import { parse } from '@babel/parser';
+import { visit } from 'ast-types';
+
+function getConfigNode(data) {
+  let configNode;
+
+  visit(parse(data), {
+    visitIdentifier: path => {
+      if (configNode) {
+        return false;
+      }
+      const name = path.getValueProperty('name');
+      if (name === 'config') {
+        const node = path.parentPath.getValueProperty('init');
+        if (node) {
+          configNode = node;
+        }
+      }
+      return false;
+    },
+  });
+
+  return configNode;
+}
+
+export { getConfigNode };
+
+function locToPositon(data) {
+  const { start, end } = data;
+  const { line: startLine, column: startCol } = start;
+  const { line: endLine, column: endCol } = end;
+  const position = [startLine, startCol + 1, endLine, endCol + 1];
+  return position;
+}
+
+export default function createTreeData(data) {
+  if (!data) return;
+
+  const { loc, properties = [] } = data;
+  const astTree = properties.map(node => {
+    if (!node) return;
+    const { key, value, loc, type } = node;
+    // 直接使用value类型 字符串 数值 布尔值
+    const valueType = [
+      'StringLiteral',
+      'NumericLiteral',
+      'BooleanLiteral',
+      'ConditionalExpression',
+      'MemberExpression',
+    ];
+    const objectType = ['ObjectExpression'];
+    const arrayType = ['ArrayExpression'];
+    const funcType = ['ArrowFunctionExpression', 'FunctionExpression'];
+    const paramsType = ['Identifier', 'ThisExpression'];
+
+    const position = locToPositon(loc);
+
+    const name = key?.name || key?.value;
+
+    // 方法的快捷表示法
+    if (type === 'ObjectMethod') {
+      return {
+        name,
+        value: null,
+        loc: position,
+      };
+    }
+
+    if (valueType.includes(value.type)) {
+      return {
+        name,
+        value: value.value,
+        loc: position,
+      };
+    }
+
+    if (objectType.includes(value.type)) {
+      return {
+        name,
+        value: null,
+        loc: position,
+        children: createTreeData(value),
+        type: 'object',
+      };
+    }
+
+    if (arrayType.includes(value.type)) {
+      return {
+        name,
+        value: null,
+        loc: position,
+        children: value.elements.map((v, idx) => {
+          return {
+            name: idx,
+            value: null,
+            type: 'object',
+            loc: locToPositon(v.loc),
+            children: createTreeData(v),
+          };
+        }),
+        type: 'array',
+      };
+    }
+
+    if (funcType.includes(value.type)) {
+      return {
+        name,
+        value: null,
+        loc: position,
+      };
+    }
+
+    if (paramsType.includes(value.type)) {
+      return {
+        name,
+        value: null,
+        loc: position,
+      };
+    }
+  });
+
+  return astTree;
+}

package/src/components/Business/JsonQueryTable/configTree/render/iconRender.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import CompactArrayView from '../component/compactArrayView';
+import CompactObjectView from '../component/compactObjectView';
+
+function iconRender(data) {
+  const { name, type, children, toggled } = data;
+  if (toggled) {
+    return name;
+  }
+  if (type === 'array') {
+    return (
+      <div>
+        <span>{name}</span>
+        <CompactArrayView array={children} />
+      </div>
+    );
+  }
+  if (type === 'object') {
+    return (
+      <div>
+        <span>{name}</span>
+        <CompactObjectView object={children} />
+      </div>
+    );
+  }
+  return name;
+}
+
+export default iconRender;

package/src/components/Business/JsonQueryTable/configTree/render/nameRender.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default data => {
+  const { type, name } = data;
+
+  const pluginTypes = ['render', 'action', 'type', 'container', 'validator'];
+  if (pluginTypes.includes(name)) {
+    return <div className="codicon codicon-symbol-method"></div>;
+  }
+
+  if (name === 'fields' || name === 'columns') {
+    return (
+      <div className="codicon codicon-color-gold-6 codicon-symbol-array"> </div>
+    );
+  }
+
+  if (typeof name === 'number' && type === 'object') {
+    return <div className="codicon codicon-symbol-variable"></div>;
+  }
+
+  return <div className="codicon codicon-symbol-property"> </div>;
+};

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

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import isArray from 'lodash/isArray';
+import cx from 'classnames';
+
+function TreeNode(props) {
+  const {
+    data,
+    nameRender,
+    iconRender,
+    level,
+    contextMenuRender,
+    activeLine,
+  } = props;
+  const [nodeData, setNodeData] = useState(data);
+  const isDirectory = !!nodeData.children;
+
+  const handleClick = () => {
+    const { onToggle, onSelect } = props;
+    const newNodeData = { ...nodeData };
+    // newNodeData.active = true;
+    if (newNodeData.children) {
+      newNodeData.toggled = !nodeData.toggled;
+    }
+    setNodeData(newNodeData);
+    if (onSelect) {
+      onSelect(newNodeData, !!nodeData.children);
+    }
+  };
+
+  useEffect(() => {
+    setNodeData(data);
+  }, [activeLine]);
+
+  const renderChildren = level => {
+    const {
+      onToggle,
+      onSelect,
+      nameRender,
+      iconRender,
+      contextMenuRender,
+    } = props;
+
+    if (nodeData.loading) {
+      return <span>loading...</span>;
+    }
+
+    let children = nodeData.children;
+    if (!isArray(children)) {
+      children = children ? [children] : [];
+    }
+
+    return (
+      <div>
+        {children.map((child, index) => (
+          <TreeNode
+            onToggle={onToggle}
+            onSelect={onSelect}
+            key={child.name || index}
+            data={child}
+            nameRender={nameRender}
+            iconRender={iconRender}
+            contextMenuRender={contextMenuRender}
+            level={level}
+            activeLine={activeLine}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  let blockNode = (
+    <div
+      className={cx(
+        'si-tree-node-block',
+        nodeData.active && 'si-tree-node-block-actived',
+      )}
+      onClick={handleClick}
+    >
+      <div
+        style={{
+          paddingLeft: `${isDirectory ? level : level + 1}em`,
+          display: 'flex',
+        }}
+      ></div>
+      {isDirectory ? (
+        <div
+          className={cx(
+            'si-tree-node-switcher codicon',
+            nodeData.toggled ? 'codicon-chevron-down' : 'codicon-chevron-right',
+          )}
+        />
+      ) : (
+        <div style={{ paddingLeft: 4 }} />
+      )}
+      {iconRender ? (
+        <div className="si-tree-node-icon">{iconRender(nodeData)}</div>
+      ) : null}
+      <div className="si-tree-node-name">
+        {nameRender ? nameRender(nodeData) : nodeData.name}
+      </div>
+    </div>
+  );
+
+  if (contextMenuRender) {
+    blockNode = contextMenuRender(nodeData, blockNode);
+  }
+
+  return (
+    <div className="si-tree-node">
+      {blockNode}
+      {nodeData.toggled ? renderChildren(level + 1) : null}
+    </div>
+  );
+}
+
+export default TreeNode;

package/src/components/Business/JsonQueryTable/drawer/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Drawer } from 'antd';
+
+export default (props:any) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <Drawer mask closable={false} forceRender {...restProps}>
+      {children}
+    </Drawer>
+  );
+};

package/src/components/Business/JsonQueryTable/function.ts

@@ -0,0 +1,62 @@
+import {request} from "bssula";
+
+export const convertActionList = (obj:any, detail:any) => {
+  return {
+      name: detail?.formParams?.name,
+      code: obj?.code,
+      type: 'request',
+      actionType: obj?.path?.template?.actionType,
+      requestTemplate: {
+        path: obj?.path?.template?.code,
+        method: detail?.formParams?.method,
+        service: detail?.otherParams?.service,
+        header: {
+          ...(obj?.headers?.template || {}),
+        },
+        param: {
+          ...(obj?.params?.template || {}),
+        },
+        requestBody: {
+          ...(obj?.params?.template || {}),
+        },
+      },
+    }
+};
+
+export const revertParam = (obj: any) => {
+  return {
+    code: obj?.code,
+    path: {
+      type: 'string',
+      template: {
+        code: obj?.requestTemplate?.path,
+        actionType: obj?.actionType,
+      },
+    },
+    headers: {
+      type: 'simple',
+      template: obj?.requestTemplate?.header,
+    },
+    params: {
+      type: 'simple',
+      template: obj?.requestTemplate?.param,
+    },
+    requestBody: {
+      type: 'simple',
+      template: obj?.requestTemplate?.requestBody,
+    },
+  }
+};
+
+export const getDynamicDict = async (dictionaryCode: any) => {
+  return await request({
+    url: `/basic/dictDynamicItem/getDynamicData/${dictionaryCode}`,
+    converter:({data}: any) => {
+      return data?.map((d:any) => ({
+        text: d.name,
+        value: d.code || d.brandCode
+      }))
+    }
+  })
+}
+

package/src/components/Business/JsonQueryTable/index.less

@@ -0,0 +1,17 @@
+
+
+.customFieldsDrawer{
+  .ant-col-8{
+    flex: 0 0 100%!important;
+    max-width: 100%!important;
+  }
+  .ant-form-item{
+    margin-bottom: 0!important;
+  }
+  .ant-form{
+    margin-bottom: 15px;
+  }
+  .sula-template-query-table-fields-wrapper{
+    align-items: center;
+  }
+}