@lingxiteam/ebe-utils 0.2.4 → 0.2.5

package/lib/pcpublic/src/components/pcfactory/src/DynamicTabs/index.tsx

@@ -1,5 +1,5 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { Badge, Tabs } from 'antd';
+import { Badge, Tabs, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useImperativeHandle, useState } from 'react';
 import { useHiddenStyle } from '../utils';
@@ -25,6 +25,8 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
     visible = true,
     onTabChange,
     onTabDeleteChange,
+    onDeleteAll,
+    closeAll,
   } = props;
   const { margin, pagePadding, width, height } = style;
 
@@ -49,17 +51,15 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
         let array = myTabItems.concat(tabs);
         // 查询一下新增的面板key是否与旧的相同
         const seen: any = {};
-        array = array.filter((item) => {
-          return seen.hasOwnProperty(item.key)
-            ? false
-            : (seen[item.key] = true);
+        array = array.filter(item => {
+          return seen.hasOwnProperty(item.key) ? false : (seen[item.key] = true);
         });
         setMyTabItems(array);
       }
     },
     // 关闭某些面板
     closeTabs: (tabsKey: any[]) => {
-      const array = myTabItems.filter((item) => !tabsKey?.includes(item.key));
+      const array = myTabItems.filter(item => !tabsKey?.includes(item.key));
       setMyTabItems(array);
     },
     // 重载面板页面
@@ -73,11 +73,7 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
     if (Array.isArray(tabsData)) {
       tabsData.forEach((item: TabsItemProps, index) => {
         const { label, key, pagePath, badge, badgeRendering, disabled } = item;
-        let itemChildren = (
-          <div style={{ padding: pagePadding }}>
-            面板未配置页面，请到面板设置中进行配置
-          </div>
-        );
+        let itemChildren = <div style={{ padding: pagePadding }}>面板未配置页面，请到面板设置中进行配置</div>;
         let itemLabel: any = label;
 
         if (pagePath?.length) {
@@ -98,8 +94,19 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
 
         if (badgeRendering && typeof (item as any)?.jsx === 'object') {
           itemLabel = (
-            <div style={{ position: 'relative' }}>
-              {label}
+            <div style={{ position: 'relative', display: 'flex', maxWidth: 164 }}>
+              <Tooltip title={() => <div style={{ fontSize: '12px' }}>{label}</div>} autoAdjustOverflow={false} arrowPointAtCenter>
+                <span
+                  style={{
+                    margin: 'auto 0',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {label}
+                </span>
+              </Tooltip>
               <CustomModule
                 sandBoxLoadModule={sandBoxLoadModule}
                 errorInfo={{ id: _component?.id }}
@@ -117,19 +124,27 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
           );
         } else {
           itemLabel = (
-            <div style={{ position: 'relative', display: 'flex' }}>
-              {itemLabel}
-              <Badge
-                count={badge}
-                overflowCount={999}
-                style={{ position: 'absolute', top: '-8px', right: '-20px' }}
-              />
+            <div style={{ position: 'relative', display: 'flex', maxWidth: 164 }}>
+              <Tooltip title={() => <div style={{ fontSize: '12px' }}>{label}</div>} autoAdjustOverflow={false} arrowPointAtCenter>
+                <span
+                  style={{
+                    margin: 'auto 0',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {itemLabel}
+                </span>
+              </Tooltip>
+              <Badge count={badge} overflowCount={999} style={{ position: 'absolute', top: '-6px', right: '-20px' }} />
             </div>
           );
         }
 
         if (!item.hasOwnProperty('isShow') || item.isShow !== false) {
           items.push({
+            ...item,
             label: itemLabel,
             key: String(key),
             disabled,
@@ -158,10 +173,7 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
       setActiveKey(defaultActiveKey);
     } else {
       const activeItem = tabItems?.find((c: TabsItemProps) => {
-        if (
-          (!c.hasOwnProperty('isShow') || c.isShow !== false) &&
-          !c.disabled
-        ) {
+        if ((!c.hasOwnProperty('isShow') || c.isShow !== false) && !c.disabled) {
           return true;
         }
         return false;
@@ -170,16 +182,51 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
     }
   }, [defaultActiveKey]);
 
-  return (
-    <div
-      className={classNames(
-        'ued-dynamic-tabs-wrap',
-        'ued-tabs-wrap',
-        className,
+  // 自定义tabbar
+  const renderTabBar = (tabProps: any, DefaultTabBar: any) => (
+    <div className="ued-tabs-customTabbar" style={tabPosition === 'bottom' ? { order: 1 } : {}}>
+      <DefaultTabBar {...tabProps} />
+      {closeAll && type === 'editable-card' && (
+        <div className="ued-tabs-closeAll">
+          <div
+            className="ued-tabs-closeAll-context"
+            onClick={() => {
+              if (type === 'editable-card' && onDeleteAll) {
+                onDeleteAll();
+              } else {
+                const items = myTabItems?.filter(item => {
+                  if (typeof item.closable === 'boolean' && !item.closable) {
+                    return true;
+                  }
+                  return false;
+                });
+                if (items.length) {
+                  const activityItem = items.find(row => row.key === activeKey);
+                  if (!activityItem) {
+                    setActiveKey(activityItem.key);
+                  }
+                }
+                setMyTabItems(items);
+              }
+            }}
+          >
+            全部关闭
+          </div>
+        </div>
       )}
-      style={finalStyle}
-    >
+    </div>
+  );
+
+  const tabProps: any = {};
+
+  if (['top', 'bottom'].includes(tabPosition)) {
+    tabProps.renderTabBar = renderTabBar;
+  }
+
+  return (
+    <div className={classNames('ued-dynamic-tabs-wrap', 'ued-tabs-wrap', className)} style={finalStyle}>
       <Tabs
+        {...tabProps}
         hideAdd
         animated={animated}
         items={finallyTabItems}
@@ -187,19 +234,27 @@ const MyDynamicTabs = LingxiForwardRef<any, DynamicTabsProps>((props, ref) => {
         activeKey={activeKey}
         tabBarGutter={tabBarGutter}
         tabPosition={tabPosition}
+        tabBarStyle={
+          ['top', 'bottom'].includes(tabPosition) && type === 'editable-card' && closeAll
+            ? {
+              marginBottom: 0,
+              marginTop: 0,
+              order: tabPosition === 'bottom' ? 0 : undefined,
+            }
+            : {}
+        }
         size={size}
+        popupClassName="ued-dynamic-tabs-more"
         onChange={(key: string) => {
           setActiveKey(key);
           if (onTabChange) {
-            const item = myTabItems?.find((item) => item.key === String(key));
+            const item = myTabItems?.find(item => item.key === String(key));
             onTabChange(key, item);
           }
         }}
         onEdit={(key: any, action: string) => {
           if (action === 'remove') {
-            const items = myTabItems?.filter(
-              (item) => item.key !== String(key),
-            );
+            const items = myTabItems?.filter(item => item.key !== String(key));
             setMyTabItems(items);
             if (type === 'editable-card' && onTabDeleteChange) {
               onTabDeleteChange(key);

package/lib/pcpublic/src/components/pcfactory/src/Form/Form.tsx

@@ -3,23 +3,8 @@ import { Col, Form as AntdForm, Row } from 'antd';
 import type { FormLayout } from 'antd/lib/form/Form';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
-import React, {
-  Children,
-  cloneElement,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  FormContextProps,
-  FormProvider,
-  getFormItemClassName,
-  PrintContainer,
-  useDynamicData,
-  usePrintMode,
-} from '../utils';
+import React, { Children, cloneElement, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { FormContextProps, FormProvider, getFormItemClassName, PrintContainer, useDynamicData, usePrintMode } from '../utils';
 import { useCreation } from '../utils/ahooks';
 import useBackgroundStyle from '../View/useBackgroundStyle';
 import { useFormStatus } from './useFormStatus';
@@ -47,6 +32,11 @@ export interface FormProps {
   visible?: boolean;
   className?: string;
   _innerDynamicDataContainer?: boolean;
+
+  /**
+   * 是否一直展示标题（零代码使用，表单内包裹view然后再包裹表单控件，需要展示标题）
+   */
+  isShowTitle?: boolean;
 }
 
 const useInit = (cb: () => () => void) => {
@@ -64,23 +54,12 @@ const useInit = (cb: () => () => void) => {
         unmountRef.current();
       }
     },
-    [unmountRef.current],
+    [unmountRef.current]
   );
 };
 
 export const ViewFormItem = (props: any) => {
-  const {
-    schemaProps,
-    selfSpan,
-    colSpan,
-    getVisible,
-    style,
-    stateListener,
-    isBlank,
-    i,
-    uid,
-    child,
-  } = props;
+  const { schemaProps, selfSpan, colSpan, getVisible, style, stateListener, isBlank, i, uid, child } = props;
 
   const [, setUpdate] = useState(0);
 
@@ -117,27 +96,19 @@ export const ViewFormItem = (props: any) => {
     return <Col key={`blank-${i}`} span={colSpan} style={finalStyle} />;
   }
   return (
-    <Col
-      key={schemaProps['data-compid']}
-      span={selfSpan || colSpan}
-      style={finalStyle}
-    >
+    <Col key={schemaProps['data-compid']} span={selfSpan || colSpan} style={finalStyle}>
       <AntdForm.Item wrapperCol={FULL_COL}>{child}</AntdForm.Item>
     </Col>
   );
 };
 
-type FormChildrenType = Pick<
-  FormProps,
-  'colSpan' | 'rowSpace' | 'layout' | 'colSpace'
-> & {
+type FormChildrenType = Pick<FormProps, 'colSpan' | 'rowSpace' | 'layout' | 'colSpace'> & {
   children?: React.ReactNode;
   formRef?: any;
   engineApis?: any;
 };
 export const FormChildren = (props: FormChildrenType) => {
-  const { children, colSpan, formRef, rowSpace, layout, colSpace, engineApis } =
-    props;
+  const { children, colSpan, formRef, rowSpace, layout, colSpace, engineApis } = props;
 
   // 兼容存量数据中，表单没有列间距的情况
   const compatColSpace = (() => {
@@ -150,10 +121,7 @@ export const FormChildren = (props: FormChildrenType) => {
   useEffect(() => {
     if (Number(rowSpace) >= 14) {
       // 动态设置 CSS 变量
-      document.documentElement.style.setProperty(
-        '--explainHelp-Line-height',
-        `${Number(rowSpace)}px`,
-      );
+      document.documentElement.style.setProperty('--explainHelp-Line-height', `${Number(rowSpace)}px`);
     }
   }, []);
 
@@ -162,13 +130,18 @@ export const FormChildren = (props: FormChildrenType) => {
    */
   const layoutChildren = () => {
     const { getVisible, stateListener } = engineApis;
-    const components: (
-      | React.ReactChild
-      | React.ReactFragment
-      | React.ReactPortal
-    )[] = [];
-    Children.forEach(Children.toArray(children), (child, index) => {
-      if (!React.isValidElement(child)) {
+    const components: (React.ReactChild | React.ReactFragment | React.ReactPortal)[] = [];
+    const comps = React.Children.toArray(children) as React.ReactElement[];
+    // 获取前一个控件的formItemIndex
+    const getLastFormIndex = (curIndex: number) => {
+      if (curIndex === 0) {
+        return 0;
+      }
+      const item = comps[curIndex - 1];
+      return item.props?.schema?.props?.formItemIndex || curIndex;
+    };
+    Children.forEach(comps, (child, index) => {
+      if (!React.isValidElement<any>(child)) {
         components.push(child);
         return;
       }
@@ -177,14 +150,8 @@ export const FormChildren = (props: FormChildrenType) => {
       const { compType, props: schemaProps } = schema || {};
 
       if (compType !== undefined && compType !== 2) {
-        const {
-          formItemIndex,
-          hidden,
-          style: childStyle,
-          selfSpan,
-        } = schemaProps;
-        const { display: customDisplay, visibility: customVisibility } =
-          childStyle || {};
+        const { formItemIndex, hidden, style: childStyle, selfSpan } = schemaProps;
+        const { display: customDisplay, visibility: customVisibility } = childStyle || {};
 
         const changeColStyle = () => {
           const colStyle: React.CSSProperties = {};
@@ -199,24 +166,25 @@ export const FormChildren = (props: FormChildrenType) => {
 
           return colStyle;
         };
-
+        const lastFormIndex = getLastFormIndex(index);
         // 中间间隔组件的个数
-        const gap = formItemIndex - index || 0;
-        new Array(gap).fill(0).forEach((_, i) => {
-          components.push(
-            <ViewFormItem
-              i={i}
-              key={`blank-${i}`}
-              style={changeColStyle()}
-              colSpan={colSpan}
-              getVisible={getVisible}
-              stateListener={stateListener}
-              isBlank
-              // child.props.$$componentItem.uid 兼容高代码模式下
-              uid={child.props.uid || child.props.$$componentItem.uid}
-            />,
-          );
-        });
+        const gap = formItemIndex - lastFormIndex - 1 || 0;
+        gap > 0 &&
+          new Array(gap).fill(0).forEach((_, i) => {
+            components.push(
+              <ViewFormItem
+                i={i}
+                key={`blank-${i}`}
+                style={changeColStyle()}
+                colSpan={colSpan}
+                getVisible={getVisible}
+                stateListener={stateListener}
+                isBlank
+                // child.props.$$componentItem.uid 兼容高代码模式下
+                uid={child.props.uid || child.props.$$componentItem.uid}
+              />
+            );
+          });
 
         components.push(
           <ViewFormItem
@@ -230,14 +198,12 @@ export const FormChildren = (props: FormChildrenType) => {
             uid={child.props.uid || child.props.$$componentItem.uid}
             child={child}
             key={child.key}
-          />,
+          />
         );
         return;
       }
 
-      components.push(
-        cloneElement(child, { extendProps: { isFormRootChild: true } } as any),
-      );
+      components.push(cloneElement(child, { extendProps: { isFormRootChild: true } } as any));
     });
 
     return components;
@@ -273,6 +239,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
     $$componentItem,
     visible = true,
     className,
+    isShowTitle = false,
   } = props;
 
   const formChildRelation = useRef({});
@@ -283,9 +250,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
   const formRef = useRef<HTMLDivElement>(null);
   const dynamicContext = useDynamicData() || {};
 
-  const { showPrintContainer, loadPrint, selectorKey } = usePrintMode(
-    props.$$componentItem.uid,
-  );
+  const { showPrintContainer, loadPrint, selectorKey } = usePrintMode(props.$$componentItem.uid);
 
   // 保存值变化回调，
   const valueChangeFnRef = useRef<(changedValues: any, values: any) => void>();
@@ -328,10 +293,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
   /**
    * 保存表单值预处理表单值的方法
    */
-  const preproccessSetFormValues = (
-    fileProps: string,
-    fn: (value: any) => any,
-  ) => {
+  const preproccessSetFormValues = (fileProps: string, fn: (value: any) => any) => {
     if (fileProps) {
       patchSetFormsValueFn[fileProps] = fn;
     }
@@ -343,11 +305,12 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
 
   const formRefHandler = useCreation(
     () => ({
+
       /**
        * 校验并滚动到某字段
        */
       validateFormAndScroll: (errScroll: boolean = true) => {
-        return form.validateFields().catch((errorInfo) => {
+        return form.validateFields().catch(errorInfo => {
           if (errScroll) {
             scrollToError(errorInfo);
           }
@@ -377,31 +340,27 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       setFieldsValue(values: any, refs: Record<string, any>) {
         const target: any = {};
         const relation: any = formChildRelation.current;
-        Object.keys(values).forEach((key) => {
-          target[key] = values[key];
-          if (typeof patchSetFormsValueFn[key] === 'function') {
-            target[key] = patchSetFormsValueFn[key](target[key]);
-          }
-          if (refs && relation) {
-            const relation = formChildRelation.current;
-            // @ts-ignore
-            const comId = relation?.[key];
-            if (comId) {
-              refs?.[comId]?.onlySyncValue(target[key]);
+        if (values) {
+          Object.keys(values).forEach(key => {
+            target[key] = values[key];
+            if (typeof patchSetFormsValueFn[key] === 'function') {
+              target[key] = patchSetFormsValueFn[key](target[key]);
             }
-          }
-          if (
-            !isEqual(form.getFieldValue(key), target[key]) &&
-            typeof onValuesChange === 'function'
-          ) {
-            if (
-              engineApis?.compatConfig?.cmd?.setFieldsValueToOnValuesChange ===
-              true
-            ) {
-              onValuesChange(key, target[key]);
+            if (refs && relation) {
+              const relation = formChildRelation.current;
+              // @ts-ignore
+              const comId = relation?.[key];
+              if (comId) {
+                refs?.[comId]?.onlySyncValue(target[key]);
+              }
             }
-          }
-        });
+            if (!isEqual(form.getFieldValue(key), target[key]) && typeof onValuesChange === 'function') {
+              if (engineApis?.compatConfig?.cmd?.setFieldsValueToOnValuesChange === true) {
+                onValuesChange(key, target[key]);
+              }
+            }
+          });
+        }
 
         form.setFieldsValue(target);
       },
@@ -426,7 +385,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       has: true,
       form,
     }),
-    [status],
+    [status]
   );
 
   /**
@@ -472,10 +431,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
 
   // 转化成antd接收的数据
   const labelCol = useMemo(() => ({ span: props.labelCol }), [props.labelCol]);
-  const wrapperCol = useMemo(
-    () => ({ span: props.wrapperCol }),
-    [props.wrapperCol],
-  );
+  const wrapperCol = useMemo(() => ({ span: props.wrapperCol }), [props.wrapperCol]);
 
   const providerValue: FormContextProps = useMemo(
     () => ({
@@ -495,19 +451,10 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       uploadChildRelation,
       preproccessSetFormValues,
       colSpace,
+      isShowTitle,
       formCode: formCode || $$componentItem?.id,
     }),
-    [
-      form,
-      layout,
-      colSpan,
-      labelCol,
-      wrapperCol,
-      colon,
-      labelAlign,
-      addListener,
-      removeListener,
-    ],
+    [form, layout, colSpan, labelCol, wrapperCol, colon, labelAlign, addListener, removeListener]
   );
 
   const formStyle: React.CSSProperties = {
@@ -524,7 +471,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       <FormProvider value={providerValue}>
         <WrapperForm>
           <AntdForm
-            className={className}
+            className={classNames(className)}
             form={form}
             layout={layout}
             labelCol={layout === 'horizontal' ? labelCol : EMPTY_COL}
@@ -544,11 +491,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
               if (dynamicContext._innerDynamicDataContainer) {
                 if (keys.length > 0) {
                   const name = keys[0];
-                  dynamicContext.onFormChange(
-                    formCode!,
-                    name,
-                    changedValues[name],
-                  );
+                  dynamicContext.onFormChange(formCode!, name, changedValues[name]);
                 }
               }
             }}
@@ -590,11 +533,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
                 style={formStyle}
                 {...extendProps}
               >
-                <FormChildren
-                  formRef={formRef}
-                  {...props}
-                  engineApis={engineApis}
-                >
+                <FormChildren formRef={formRef} {...props} engineApis={engineApis}>
                   {props.children}
                 </FormChildren>
               </AntdForm>

package/lib/pcpublic/src/components/pcfactory/src/Form/useFormStatus.ts

@@ -8,11 +8,7 @@ export type FormStatusType = {
   [key in StatusType]?: unknown;
 };
 
-const useSubscriptionStatus = (options: {
-  run: (type: StatusType, v: unknown) => void;
-  type: StatusType;
-  listened: unknown;
-}) => {
+const useSubscriptionStatus = (options: { run: (type: StatusType, v: unknown) => void; type: StatusType; listened: unknown }) => {
   const { run, type, listened } = options;
   useUpdateEffect(() => {
     if (!isUndefined(listened)) {

package/lib/pcpublic/src/components/pcfactory/src/Form/useMonitor.ts

@@ -17,7 +17,7 @@ const useMonitor = () => {
    * 移除监听事件
    */
   const removeListener = useCallback((fn: MonitorFn) => {
-    const index = monitor.findIndex((v) => v === fn);
+    const index = monitor.findIndex(v => v === fn);
     if (index > -1) {
       monitor.splice(index, 1);
     }
@@ -27,7 +27,7 @@ const useMonitor = () => {
    * 执行监听事件
    */
   const execListeners = useCallback((v: unknown, type: StatusType) => {
-    monitor.forEach((fn) => fn(v, type));
+    monitor.forEach(fn => fn(v, type));
   }, []);
 
   return {