@bit-sun/business-component 4.2.0-alpha.6.8 → 4.2.5-per-alpha.1

package/src/components/Functional/DataValidation/index.tsx

@@ -17,7 +17,8 @@ import {
   Menu,
   Tooltip,
   message,
-  Upload
+  Upload,
+  Spin
 } from 'antd';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import {
@@ -31,6 +32,7 @@ import './index.less';
 import _, { ceil, isNumber } from "lodash"
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import { readerXlsxToList } from '@/utils/xlsxUtil';
+import { loadLuckysheet } from '@/utils/luckysheetLoader';
 
 // const luckysheet = window.luckysheet;
 
@@ -154,6 +156,9 @@ class DataValidation extends React.Component {
       items: [...itemsTemp],
       resultData: [],
       errorListCheck: false,
+      luckysheetLoading: false,
+      luckysheetLoadError: null,
+      luckysheetReady: false,
     };
   }
 
@@ -387,9 +392,38 @@ class DataValidation extends React.Component {
     };
   };
 
-  componentDidMount() {
+  async componentDidMount() {
     this.props.onRef(this);
-    luckysheet.create(this.setConfig([]));
+    
+    try {
+      // 开始加载 luckysheet
+      this.setState({ luckysheetLoading: true, luckysheetLoadError: null });
+      
+      // 动态加载 luckysheet 资源
+      await loadLuckysheet();
+      
+      // 更新 luckysheet 引用
+      luckysheet = window.luckysheet || window.top.luckysheet;
+      
+      if (!luckysheet) {
+        throw new Error('Luckysheet 加载失败，请检查网络连接');
+      }
+      
+      // 初始化 luckysheet
+      luckysheet.create(this.setConfig([]));
+      
+      this.setState({ 
+        luckysheetLoading: false, 
+        luckysheetReady: true 
+      });
+      
+    } catch (error) {
+      console.error('DataValidation 组件初始化失败:', error);
+      this.setState({ 
+        luckysheetLoading: false,
+        luckysheetLoadError: error.message || '加载失败'
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -878,6 +912,50 @@ customSort = (a, b) => {
         </div>
 
         <div style={{ position: 'relative', height: '400px' }}>
+          {this.state.luckysheetLoading && (
+            <div style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: 'rgba(255, 255, 255, 0.8)',
+              zIndex: 1000
+            }}>
+              <Spin size="large" tip="正在加载 Luckysheet..." />
+            </div>
+          )}
+          {this.state.luckysheetLoadError && (
+            <div style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: 'rgba(255, 255, 255, 0.9)',
+              zIndex: 1000,
+              flexDirection: 'column'
+            }}>
+              <div style={{ color: 'red', marginBottom: 16 }}>
+                加载失败: {this.state.luckysheetLoadError}
+              </div>
+              <Button 
+                type="primary" 
+                onClick={() => {
+                  this.setState({ luckysheetLoadError: null });
+                  this.componentDidMount();
+                }}
+              >
+                重新加载
+              </Button>
+            </div>
+          )}
           <div id="luckysheet" style={luckyCss}></div>
         </div>
         {!this.props.notValid && !!totalSummary.total && <div className="sheet_table_footer">

package/src/index.ts

@@ -48,5 +48,3 @@ export { default as RuleSetter} from './components/Solution/RuleSetter';
 export { default as ExtendedCollapse } from './components/Common/ExtendedCollapse';
 export { default as Section } from './components/Common/Section';
 export { default as ParagraphCopier } from './components/Common/ParagraphCopier';
-
-export { default as SystemLog } from './components/Business/SystemLog';

package/src/utils/luckysheetLoader.ts

@@ -0,0 +1,164 @@
+/**
+ * Luckysheet 动态加载器
+ * 实现按需加载 luckysheet 的 CSS 和 JS 资源
+ */
+
+interface LoaderCache {
+  loaded: boolean;
+  loading: Promise<void> | null;
+}
+
+const cache: LoaderCache = {
+  loaded: false,
+  loading: null
+};
+
+// Luckysheet 资源配置
+const LUCKYSHEET_RESOURCES = {
+  css: [
+    'https://bitsun-website.oss-cn-shanghai.aliyuncs.com/cdn/dist/plugins/css/pluginsCss.css',
+    'https://bitsun-website.oss-cn-shanghai.aliyuncs.com/cdn/dist/plugins/plugins.css',
+    'https://bitsun-website.oss-cn-shanghai.aliyuncs.com/cdn/dist/css/luckysheet.css',
+    'https://bitsun-website.oss-cn-shanghai.aliyuncs.com/cdn/dist/assets/iconfont/iconfont.css'
+  ],
+  js: [
+    'https://bitsun-website.oss-cn-shanghai.aliyuncs.com/cdn/dist/plugins/js/plugin.js',
+    'https://bitsun-website.oss-cn-shanghai.aliyuncs.com/cdn/dist/luckysheet.umd.js'
+  ]
+};
+
+/**
+ * 动态加载 CSS 文件
+ * @param url CSS 文件 URL
+ * @returns Promise
+ */
+function loadCSS(url: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // 检查是否已经加载过该 CSS
+    const existingLink = document.querySelector(`link[href="${url}"]`);
+    if (existingLink) {
+      resolve();
+      return;
+    }
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = url;
+    
+    link.onload = () => resolve();
+    link.onerror = () => reject(new Error(`Failed to load CSS: ${url}`));
+    
+    document.head.appendChild(link);
+  });
+}
+
+/**
+ * 动态加载 JS 文件
+ * @param url JS 文件 URL
+ * @returns Promise
+ */
+function loadJS(url: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // 检查是否已经加载过该 JS
+    const existingScript = document.querySelector(`script[src="${url}"]`);
+    if (existingScript) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = url;
+    
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load JS: ${url}`));
+    
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * 检查 luckysheet 是否可用
+ * @returns boolean
+ */
+function isLuckysheetAvailable(): boolean {
+  return typeof window !== 'undefined' && 
+         (window as any).luckysheet !== undefined;
+}
+
+/**
+ * 动态加载 Luckysheet 资源
+ * @returns Promise<void>
+ */
+export async function loadLuckysheet(): Promise<void> {
+  // 如果已经加载完成，直接返回
+  if (cache.loaded && isLuckysheetAvailable()) {
+    return Promise.resolve();
+  }
+
+  // 如果正在加载中，返回正在进行的 Promise
+  if (cache.loading) {
+    return cache.loading;
+  }
+
+  // 开始加载
+  cache.loading = (async () => {
+    try {
+      console.log('开始动态加载 Luckysheet 资源...');
+      
+      // 并行加载所有 CSS 文件
+      const cssPromises = LUCKYSHEET_RESOURCES.css.map(url => loadCSS(url));
+      await Promise.all(cssPromises);
+      console.log('Luckysheet CSS 文件加载完成');
+      
+      // 顺序加载 JS 文件（保证依赖顺序）
+      for (const url of LUCKYSHEET_RESOURCES.js) {
+        await loadJS(url);
+      }
+      console.log('Luckysheet JS 文件加载完成');
+      
+      // 等待 luckysheet 对象可用
+      let retryCount = 0;
+      const maxRetries = 50; // 最多等待 5 秒
+      
+      while (!isLuckysheetAvailable() && retryCount < maxRetries) {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        retryCount++;
+      }
+      
+      if (!isLuckysheetAvailable()) {
+        throw new Error('Luckysheet 加载超时，请检查网络连接');
+      }
+      
+      cache.loaded = true;
+      console.log('Luckysheet 动态加载完成');
+      
+    } catch (error) {
+      console.error('Luckysheet 加载失败:', error);
+      cache.loading = null; // 重置加载状态，允许重试
+      throw error;
+    }
+  })();
+
+  return cache.loading;
+}
+
+/**
+ * 重置加载状态（用于测试或强制重新加载）
+ */
+export function resetLuckysheetLoader(): void {
+  cache.loaded = false;
+  cache.loading = null;
+}
+
+/**
+ * 获取加载状态
+ * @returns 加载状态信息
+ */
+export function getLuckysheetLoadStatus(): { loaded: boolean; loading: boolean } {
+  return {
+    loaded: cache.loaded,
+    loading: cache.loading !== null
+  };
+}

package/src/utils/utils.ts

@@ -267,44 +267,4 @@ export const handleConvertResponse = (items: any, total: number): object => {
 
 export const noEmptyArray = (targetObj: any) => {
   return Array.isArray(targetObj) && targetObj.length !== 0;
-};
-
-export const formContainerAndItemLayout = (type: string, title: any, name: string) => {
-  return type === 'form' ? {
-    container: {
-      type: 'card',
-      props: {
-        title,
-        id: Math.random(),
-        level: 1,
-        name
-      },
-    },
-    itemLayout: {
-      span: 8, // span表示每项所占的栅格数
-      labelCol: {
-        span: 8,
-      },
-      wrapperCol: {
-        span: 18,
-      },
-    },
-  } : {
-    container: {
-      type: 'card',
-      props: {
-        title,
-        id: Math.random(),
-        level: 1,
-        bordered: null,
-        isWhiteCard: true,
-        name
-      },
-    },
-    itemLayout: {
-      wrapperCol: {
-        span: 0,
-      },
-    },
-  }
-}
+};

package/dist/components/Business/SystemLog/index.d.ts

@@ -1,78 +0,0 @@
-declare const SystemLog: ({ modeType, code, containerName, renderLogRef, extraParams, }: {
-    modeType: string;
-    code: any;
-    containerName: string;
-    renderLogRef: object;
-    extraParams?: object | undefined;
-}) => {
-    initialVisible: boolean;
-    fields: {
-        name: string;
-        label: boolean;
-        itemLayout: {
-            span: number;
-            labelCol: {
-                span: number;
-            };
-            wrapperCol: {
-                span: number;
-            };
-        };
-        field: (ctx: any) => any;
-    }[];
-    container: {
-        type: string;
-        props: {
-            title: any;
-            id: number;
-            level: number;
-            name: string;
-            bordered?: undefined;
-            isWhiteCard?: undefined;
-        };
-    };
-    itemLayout: {
-        span: number;
-        labelCol: {
-            span: number;
-        };
-        wrapperCol: {
-            span: number;
-        };
-    };
-} | {
-    initialVisible: boolean;
-    fields: {
-        name: string;
-        label: boolean;
-        itemLayout: {
-            span: number;
-            labelCol: {
-                span: number;
-            };
-            wrapperCol: {
-                span: number;
-            };
-        };
-        field: (ctx: any) => any;
-    }[];
-    container: {
-        type: string;
-        props: {
-            title: any;
-            id: number;
-            level: number;
-            bordered: null;
-            isWhiteCard: boolean;
-            name: string;
-        };
-    };
-    itemLayout: {
-        wrapperCol: {
-            span: number;
-        };
-        span?: undefined;
-        labelCol?: undefined;
-    };
-};
-export default SystemLog;

package/src/components/Business/SystemLog/index.md

@@ -1,37 +0,0 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 日志组件
-order: 1
----
-
-# SystemLog
-
-
-## 日志业务组件
-
-```tsx
-import React, { useState } from 'react';
-import { SystemLog } from '../../../index.ts';
-
-export default () => {
-  const [modeType, setModeType] = useState('view');
-  const renderLogRef = useRef<any>();
-
-  return {
-   fields: [
-      SystemLog({
-        modeType,
-        code: '123',
-        containerName: 'Test_Log_Info',
-        renderLogRef,
-        extraParams: {},
-      })
-    ],
-  };
-};
-```

package/src/components/Business/SystemLog/index.tsx

@@ -1,87 +0,0 @@
-import { handleCommonTimeRender } from '@/utils/TableUtils';
-import { formContainerAndItemLayout, handleConvertResponse } from '@/utils/utils';
-import { Table as BsTable } from 'bssula';
-import React from 'react';
-
-//操作日志
-const SystemLog = ({
-  modeType,
-  code,
-  containerName,
-  renderLogRef = {},
-  extraParams = {},
-}: {
-  modeType: string,
-  code: any
-  containerName: string,
-  renderLogRef: object,
-  extraParams?: object,
-}) => {
-  return {
-    ...formContainerAndItemLayout('table', '操作日志', containerName),
-    initialVisible: modeType != 'create',
-    fields: [
-      {
-        name: 'table',
-        label: false,
-        itemLayout: {
-          span: 24,
-          labelCol: {
-            span: 0,
-          },
-          wrapperCol: {
-            span: 24,
-          },
-        },
-        field: (ctx: any) => {
-          return code && <BsTable
-            remoteDataSource={{
-              url: `/oms-ops/logInfo?qp-businessCode-eq=${code}`,
-              convertParams: ({ params }: any) => {
-                return {
-                  pageSize: params.pageSize,
-                  currentPage: params.current,
-                  ...extraParams,
-                };
-              },
-              converter: ({ data }: any) => {
-                return {
-                  ...handleConvertResponse(data.list, data.total || data.totalCount),
-                };
-              },
-            }}
-            columns={[
-              {
-                title: '操作人',
-                dataIndex: 'handlerName',
-              },
-              {
-                title: '操作名称',
-                dataIndex: 'handlerType',
-              },
-              {
-                title: '操作时间',
-                dataIndex: 'handlerTime',
-                render: ({ text }: { text: any }) => handleCommonTimeRender(text)
-              },
-              {
-                title: '操作内容',
-                dataIndex: 'logcontent',
-              },
-            ]}
-            style={{ width: '100%', marginTop: '-16px', padding: '0px' }}
-            rowKey="id"
-            scroll={{ x: 'max-content' }}
-            pagination={{
-              showTotal: (total: any) => `共 ${total} 条`,
-              showQuickJumper: true,
-              hideOnSinglePage: true,
-            }}
-            ref={renderLogRef}
-          />
-        },
-      },
-    ],
-  }
-}
-export default SystemLog