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

package/src/components/Business/SearchSelect/BusinessUtils.tsx

@@ -13,7 +13,7 @@ const sharingTypeDataList = hasDictSharingType && getDictionarySource('UC000013'
 
 export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
   const { requestConfig:requestConfigProp={},  selectProps:selectConfigProps={}, modalTableProps:modalTableBusProps={}, hiddenFields=[]} = parentProps || {};
-
+  
   // 默认type === 'supplier' 供应商选择器
   let requestConfig = {
     init: true,
@@ -56,11 +56,11 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
     };
   };
   const formatTreeDataSource = (
-    reData: any,
-    position: number,
+    reData: any, 
+    position: number, 
     changePosition: number,
     changeSearchForm: any,
-    resKeyValue=['id', 'name'],
+    resKeyValue=['id', 'name'], 
     childrenKey = 'children',
     nodeDisabledJudge?: (data: any) => boolean, // 树节点能不能选 函数判断
   ) => {
@@ -344,7 +344,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
     }
     tableSearchForm =  [
       { name: 'qp-skuCode-in', label: 'SKU编码', field: {
-        type:'multipleQuerySearchSelect',
+        type:'multipleQuerySearchSelect', 
         props: {
           selectProps: {
             mode: "multiple",
@@ -366,7 +366,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       } },
       { name: 'qp-skuName-like', label: 'SKU名称' },
       { name: 'qp-itemCode-in', label: 'SPU编码', field: {
-        type:'multipleQuerySearchSelect',
+        type:'multipleQuerySearchSelect', 
         props: {
           selectProps: {
             placeholder: '请输入SPU编码查询'
@@ -733,9 +733,9 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
               option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
           },
         } },
-        {
-          name: 'qp-year-in',
-          label: '年份',
+        { 
+          name: 'qp-year-in', 
+          label: '年份', 
           field: {
             type: 'itemPropertySelector',
             props: {
@@ -744,9 +744,9 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
             }
           }
         },
-        {
-          name: 'qp-season-in',
-          label: '季节',
+        { 
+          name: 'qp-season-in', 
+          label: '季节', 
           field: {
             type: 'itemPropertySelector',
             props: {
@@ -755,9 +755,9 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
             }
           }
         },
-        {
-          name: 'qp-zzdlbm-in',
-          label: '大类',
+        { 
+          name: 'qp-zzdlbm-in', 
+          label: '大类', 
           field: {
             type: 'itemPropertySelector',
             props: {
@@ -766,9 +766,9 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
             }
           }
         },
-        {
-          name: 'qp-zzzlbm-in',
-          label: '中类',
+        { 
+          name: 'qp-zzzlbm-in', 
+          label: '中类', 
           field: {
             type: 'itemPropertySelector',
             props: {
@@ -777,9 +777,9 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
             }
           }
         },
-        {
-          name: 'qp-zzxlbm-in',
-          label: '小类',
+        { 
+          name: 'qp-zzxlbm-in', 
+          label: '小类', 
           field: {
             type: 'itemPropertySelector',
             props: {
@@ -1198,84 +1198,12 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       sourceName: 'warehouseIds',
       ...requestConfigProp,
     }
-    const queryHeaderParams  = getQueryHeadersList({ querySelectHeadersList, extralHeaders});
-    Promise.all([
-      loadSelectSource(`/channel-manage/channelInfo/tree`, {
-        'qp-status-eq': 10,
-        'qp-isMain-eq': 1,
-        'qp-type-in': '1,2',
-      },getQueryHeadersItem(queryHeaderParams,'qp-orgCode-in')),
-      loadSelectSource(`/channel-manage/tagNode/getTree/10`, {
-        'qp-status-eq': 1,
-      },getQueryHeadersItem(queryHeaderParams,'qp-orgCode-in')),
-    ]).then((x: any)=>{
-      const channelDisabledJude = (data: any) => data['parentCode'] === '0'; // 所属销售渠道 树节点不能点判断
-      const areaDisabledJude = (data: any) => data['parent'] === '0'; // 所属营销区域 树节点不能点判断
-      formatTreeDataSource(x, 0, 4, tableSearchForm, ['code','name'], 'channelInfoSon', channelDisabledJude)
-      formatTreeDataSource(x, 1, 5, tableSearchForm, ['code', 'name'], 'children', areaDisabledJude)
-    })
     tableSearchForm = [
       { name: 'realWarehouseName*multiInput', label: '逻辑仓名称', type: 'multipleQueryInput' },
       { name: 'realWarehouseCode*multiInput', label: '逻辑仓编码', type: 'multipleQueryInput' },
       { name: 'qp-realWarehouseType-eq', type: 'select', label: '逻辑仓类型', initialSource: getDictionarySource('SC00004')  },
       { name: 'belongArea', field: {type: 'select', props: {mode: 'multiple',}}, label: '管理大区', initialSource: getDictionarySource('BUSINESS_belongArea'),   },
-      {
-        name: 'qp-channelCode-in', type: 'treeSelect', label: '销售渠道', field: {
-          type: 'treeSelect',
-          props: {
-            multiple: true,
-            treeData: [],
-            treeCheckable: false,
-            notFoundContent: '暂无数据',
-            allowClear: true,
-            showSearch: true,
-            showArrow: true,
-            maxTagCount: 1,
-            optionFilterProp: 'children',
-            filterOption: (input: string, option: { props: { children: string } }) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-            showCheckedStrategy: 'TreeSelect.SHOW_ALL',
-          },
-        }
-      },
-      {
-        name: 'qp-refCode-in', type: 'treeSelect', label: '营销区域', field: {
-          type: 'treeSelect',
-          props: {
-            multiple: true,
-            treeData: [],
-            treeCheckable: false,
-            notFoundContent: '暂无数据',
-            allowClear: true,
-            showSearch: true,
-            showArrow: true,
-            maxTagCount: 1,
-            optionFilterProp: 'children',
-            filterOption: (input: string, option: { props: { children: string } }) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-
-            showCheckedStrategy: 'TreeSelect.SHOW_ALL',
-          },
-        }
-      },
-      {
-        name: 'qp-type-in', type: 'select', label: '店铺性质', field: {
-          type: 'select',
-          props: {
-            mode: 'multiple',
-            notFoundContent: '暂无数据',
-            allowClear: true,
-            showSearch: true,
-            showArrow: true,
-            maxTagCount: 1,
-            optionFilterProp: 'children',
-            filterOption: (input: string, option: { props: { children: string } }) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-          },
-        },
-        initialSource: getDictionarySource('BUSINESS_StoreType')
-      },
-      ...(modalTableBusProps?.needStatusSearch?[{ name: 'qp-isEnable-eq', type: 'select', label: '逻辑仓状态', initialSource: getDictionarySource('SC00001')  }]:[]),
+      ...(modalTableBusProps?.needStatusSearch?[{ name: 'qp-isEnable-eq', type: 'select', label: '逻辑仓状态', initialSource: getDictionarySource('SC00001')  }]:[])
     ]
     modalTableProps = {
       modalTableTitle: '选择逻辑仓',
@@ -1302,29 +1230,10 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
           defaultSort: 3,
           render: (text: number) => getDictionaryTextByValue('SC00004', text),
         },
-        {
-          title: '所属销售渠道',
-          dataIndex: 'channelName',
-          defaultSort: 4,
-          width: 100,
-        },
-        {
-          title: '营销区域',
-          dataIndex: 'commonRelationAreaName',
-          defaultSort: 5,
-          width: 100,
-        },
-        {
-          title: '店铺性质',
-          dataIndex: 'type',
-          defaultSort: 6,
-          render: (text: any) => getDictionaryTextByValue('BUSINESS_StoreType', text),
-          width: 80,
-        },
         ...(modalTableBusProps?.needStatusSearch?[{
           title: '状态',
           dataIndex: 'isEnable',
-          defaultSort: 7,
+          defaultSort: 4,
           render: (text: number) => getDictionaryTextByValue('SC00001', text),
         }]:[]),
       ],
@@ -1379,39 +1288,13 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
               option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
           },
         } },
-        {
-        name: 'qp-channelCode-in', type: 'treeSelect', label: '销售渠道', field: {
-          type: 'treeSelect',
-          props: {
-            multiple: true,
-            treeData: [],
-            treeCheckable: false,
-            notFoundContent: '暂无数据',
-            allowClear: true,
-            showSearch: true,
-            showArrow: true,
-            maxTagCount: 1,
-            optionFilterProp: 'children',
-            filterOption: (input: string, option: { props: { children: string } }) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-            showCheckedStrategy: 'TreeSelect.SHOW_ALL',
-          },
-        }
-      },
-      ...(modalTableBusProps?.needStatusSearch?[{ name: 'qp-status-eq', type: 'select', label: '运营仓状态', initialSource: getDictionarySource('SC00001')  }]:[]),
+      ...(modalTableBusProps?.needStatusSearch?[{ name: 'qp-status-eq', type: 'select', label: '运营仓状态', initialSource: getDictionarySource('SC00001')  }]:[])
     ]
     const queryHeaderParams  = getQueryHeadersList({ querySelectHeadersList, extralHeaders});
     Promise.all([
       loadSelectSource(`${prefixUrl.formSelectFix}/groupInfo/listNoPage`, { 'qp-status-eq': 1 },getQueryHeadersItem(queryHeaderParams,'qp-groupCode-in')),
-      loadSelectSource(`/channel-manage/channelInfo/tree`, {
-        'qp-status-eq': 10,
-        'qp-isMain-eq': 1,
-        'qp-type-in': '1,2',
-      },getQueryHeadersItem(queryHeaderParams,'qp-orgCode-in')),
     ]).then((x: any)=>{
       formatSource(x,0, 2, tableSearchForm,['groupCode','groupName']);
-      const channelDisabledJude = (data: any) => data['parentCode'] === '0'; // 所属销售渠道 树节点不能点判断
-      formatTreeDataSource(x, 1, 3, tableSearchForm, ['code','name'], 'channelInfoSon', channelDisabledJude)
     })
     modalTableProps = {
       modalTableTitle: '选择运营仓',
@@ -1443,12 +1326,6 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
           defaultSort: 4,
           render: (text: number) => getDictionaryTextByValue('SC00001', text),
         }]:[]),
-         {
-          title: '所属销售渠道',
-          dataIndex: 'channelName',
-          defaultSort: 5,
-          width: 100,
-        },
       ],
       ...modalTableBusProps,
     }
@@ -1722,66 +1599,15 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
               option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
           },
         } },
-        {
-        name: 'qp-saleChannel-in', type: 'treeSelect', label: '销售渠道', field: {
-          type: 'treeSelect',
-          props: {
-            multiple: true,
-            treeData: [],
-            treeCheckable: false,
-            notFoundContent: '暂无数据',
-            allowClear: true,
-            showSearch: true,
-            showArrow: true,
-            maxTagCount: 1,
-            optionFilterProp: 'children',
-            filterOption: (input: string, option: { props: { children: string } }) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-            showCheckedStrategy: 'TreeSelect.SHOW_ALL',
-          },
-        }
-      },
-      {
-        name: 'qp-refCode-in', type: 'treeSelect', label: '营销区域', field: {
-          type: 'treeSelect',
-          props: {
-            multiple: true,
-            treeData: [],
-            treeCheckable: false,
-            notFoundContent: '暂无数据',
-            allowClear: true,
-            showSearch: true,
-            showArrow: true,
-            maxTagCount: 1,
-            optionFilterProp: 'children',
-            filterOption: (input: string, option: { props: { children: string } }) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-
-            showCheckedStrategy: 'TreeSelect.SHOW_ALL',
-          },
-        }
-      },
-    ];
+    ]
     const queryHeaderParams  = getQueryHeadersList({ querySelectHeadersList, extralHeaders});
     Promise.all([
       loadSelectSource(`${prefixUrl.formSelectFix}/org/listNoPage`, {},getQueryHeadersItem(queryHeaderParams,'qp-createOrgCode-eq')),
-      loadSelectSource(`/channel-manage/channelInfo/tree`, {
-        'qp-status-eq': 10,
-        'qp-isMain-eq': 1,
-        'qp-type-in': '1,2',
-      },getQueryHeadersItem(queryHeaderParams,'qp-orgCode-in')),
-      loadSelectSource(`/channel-manage/tagNode/getTree/10`, {
-        'qp-status-eq': 1,
-      },getQueryHeadersItem(queryHeaderParams,'qp-orgCode-in')),
     ]).then((x: any)=>{
       const firstElement = x?.[0];
       const allList = firstElement && [firstElement, firstElement];
       formatSource(allList,0, 2, tableSearchForm);
       formatSource(allList,1, 3, tableSearchForm);
-      const channelDisabledJude = (data: any) => data['parentCode'] === '0'; // 所属销售渠道 树节点不能点判断
-      const areaDisabledJude = (data: any) => data['parent'] === '0'; // 所属营销区域 树节点不能点判断
-      formatTreeDataSource(x, 1, 4, tableSearchForm, ['code','name'], 'channelInfoSon', channelDisabledJude)
-      formatTreeDataSource(x, 2, 5, tableSearchForm, ['code', 'name'], 'children', areaDisabledJude)
     })
     modalTableProps = {
       modalTableTitle: '选择客户',
@@ -1811,19 +1637,6 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
           title: '使用组织',
           dataIndex: 'salesOrgName',
           defaultSort: 4,
-          width: 100,
-        },
-         {
-          title: '所属销售渠道',
-          dataIndex: 'channelName',
-          defaultSort: 5,
-          width: 100,
-        },
-        {
-          title: '营销区域',
-          dataIndex: 'commonRelationAreaName',
-          defaultSort: 6,
-          width: 100,
         },
       ],
       ...modalTableBusProps
@@ -2091,7 +1904,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
           optionFilterProp: 'children',
           filterOption: (input: string, option: { props: { children: string } }) =>
             option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-
+        
           showCheckedStrategy: 'TreeSelect.SHOW_ALL',
         },
       } },
@@ -2109,7 +1922,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
             option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
         },
       } ,
-      initialSource: getDictionarySource('BUSINESS_StoreType')
+      initialSource: getDictionarySource('BUSINESS_StoreType') 
     },
     ]
     const queryHeaderParams  = getQueryHeadersList({ querySelectHeadersList, extralHeaders});

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { useState } from 'react';
 import { Table, Tooltip, Typography } from 'antd';
 import { Resizable } from 'react-resizable';
@@ -82,9 +81,9 @@ export default class ColumnSettingTable extends React.Component {
 
   /**
      * 新增函数，用于根据传入的小数位数进行四舍五入
-     * @param number
-     * @param decimalPlaces
-     * @returns
+     * @param number 
+     * @param decimalPlaces 
+     * @returns 
      */
   roundToDecimalPlaces = (number: any, decimalPlaces: number) => {
     const factor = Math.pow(10, (decimalPlaces || 2));
@@ -93,7 +92,7 @@ export default class ColumnSettingTable extends React.Component {
 
   /**
    * 合计行逻辑
-   * @returns
+   * @returns 
    */
   getTableSummaryInfo = () => {
     const { summary = undefined, rowSelection, expandable, modeType, dataSource, isSpecial = false, }: any = this.props;
@@ -233,7 +232,7 @@ export default class ColumnSettingTable extends React.Component {
 
   /**
    * 处理行点击事件
-   * @param record
+   * @param record 
    */
   handleRowClick = (record: any) => {
     const { selectedRowKeys, selectedRows, } = this.state;
@@ -317,7 +316,7 @@ export default class ColumnSettingTable extends React.Component {
         ...propRowSelection,
         selectedRowKeys: this.state.selectedRowKeys,
         onChange: (selectedRowKeys: any, selectedRows: any) => {
-            this.setState({
+            this.setState({ 
                 selectedRowKeys,
                 selectedRows
             });

package/src/components/Business/columnSettingTable/sulaSettingTable.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Table as SulaTable, request } from 'bssula';
 import { Resizable } from 'react-resizable';
@@ -23,7 +22,7 @@ export default class ColumnSettingSulaTable extends React.Component {
       showColumns: [],
       selectedRowKeys: [], // 新增状态，用于跟踪选中的行的键
       selectedRows: [],
-      showSummary: null
+      showSummary: null 
     }
     this.sulaTableRef = React.createRef<any>();
   }
@@ -80,9 +79,9 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   /**
    * 新增函数，用于根据传入的小数位数进行四舍五入
-   * @param number
-   * @param decimalPlaces
-   * @returns
+   * @param number 
+   * @param decimalPlaces 
+   * @returns 
    */
   roundToDecimalPlaces = (number: any, decimalPlaces: number) => {
     const factor = Math.pow(10, (decimalPlaces || 2));
@@ -91,7 +90,7 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   /**
    * 合计行逻辑
-   * @returns
+   * @returns 
    */
   getTableSummaryInfo = () => {
     const { summary = undefined, rowSelection, expandable, isSpecial = false, modeType }: any = this.props;
@@ -168,10 +167,10 @@ export default class ColumnSettingSulaTable extends React.Component {
         </Table.Summary.Row>
       </Table.Summary>
     );
-
+    
     return () => summaryDom;
-  };
-
+  }; 
+  
   handledynamicColumns = (col: any[]) => {
     let { dynamicColumns, modeType }: any = this.props;
     col = col.map((item: any) => {
@@ -206,7 +205,7 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   ResizeableTitle = (props: any) => {
     const { onResize, width, ...restProps } = props;
-
+    
     const [innerWidth, setInnerWidth] = useState(width);
     const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
     const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
@@ -214,9 +213,9 @@ export default class ColumnSettingSulaTable extends React.Component {
     const markerPosition = useRef({ left: 0, top: 0 });
     const currentStart = useRef(0);
     const uuidref = useRef(uuid());
-
+    
     const prevWidthRef = useRef(width);
-
+  
     const handleMouseDown = (e: any) => {
       currentStart.current = e.clientX;
       markerPosition.current = { left: e.clientX, top: e.clientY }
@@ -224,35 +223,35 @@ export default class ColumnSettingSulaTable extends React.Component {
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('mouseup', handleMouseUp);
     };
-
+  
     const handleMouseMove = (e: any) => {
       e.stopPropagation();
       e.preventDefault();
       // 更新标记位置
       markerPosition.current = { left: e.clientX, top: e.clientY }
       const dom: HTMLElement | null =  document.getElementById('text1');
-
+  
       if (dom && dom.style) {
         dom.style.left = `${e.clientX}px`;
         dom.style.top = `${e.clientY - 20}px`;
       }
     };
-
+  
     const handleMouseUp = (e: any) => {
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
       setIsResizing(false);
     };
-
+    
     const handleresize = (e: any, data: any, title: string) => {
       const newWidth = data?.size?.width || 0;
       setInnerWidth(newWidth); // 更新内部分宽度
     };
-
+  
     const handleResizeStart = () => {
       setIsResizing(true);
     };
-
+  
     const handleResizeStop = (e: any, data: any) => {
       setIsResizing(false);
       if (onResize) {
@@ -266,11 +265,11 @@ export default class ColumnSettingSulaTable extends React.Component {
         setInnerWidth(width);
       }
     }, [width]);
-
+  
     const thStyle = {
       boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
     };
-
+  
     return (
       <Resizable
         width={innerWidth}
@@ -334,7 +333,7 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   /**
    * 处理行点击事件
-   * @param record
+   * @param record 
    */
   handleRowClick = (record: any) => {
     const { selectedRowKeys, selectedRows, } = this.state;
@@ -421,7 +420,7 @@ export default class ColumnSettingSulaTable extends React.Component {
         ...propRowSelection,
         selectedRowKeys: this.state.selectedRowKeys,
         onChange: (selectedRowKeys: any, selectedRows: any) => {
-            this.setState({
+            this.setState({ 
                 selectedRowKeys,
                 selectedRows
             });
@@ -437,7 +436,7 @@ export default class ColumnSettingSulaTable extends React.Component {
         };
       },
     }
-
+    
     return (
       <div style={{ position: 'relative' }}>
         <span style={{ position: 'absolute', zIndex: '10', right: '8px', top: '10px' }} className="ant-dropdown-link">

package/src/components/Functional/DataImport/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 _ 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 DataImport extends React.Component {
       items: [...itemsTemp],
       resultData: [],
       errorListCheck: false,
+      luckysheetLoading: false,
+      luckysheetLoadError: null,
+      luckysheetReady: false,
     };
   }
 
@@ -376,8 +381,32 @@ class DataImport extends React.Component {
     };
   };
 
-  componentDidMount() {
-    luckysheet.create(this.setConfig([]));
+  async componentDidMount() {
+    this.setState({ luckysheetLoading: true });
+    
+    try {
+      await loadLuckysheet();
+      
+      // 重新获取luckysheet实例
+      luckysheet = window.luckysheet || window.top.luckysheet;
+      
+      if (luckysheet) {
+        luckysheet.create(this.setConfig([]));
+        this.setState({ 
+          luckysheetReady: true,
+          luckysheetLoading: false,
+          luckysheetLoadError: null 
+        });
+      } else {
+        throw new Error('Luckysheet 加载失败');
+      }
+    } catch (error) {
+      console.error('加载 Luckysheet 失败:', error);
+      this.setState({ 
+        luckysheetLoading: false,
+        luckysheetLoadError: error.message || '加载失败' 
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -760,6 +789,50 @@ class DataImport extends React.Component {
         </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', 
+              flexDirection: 'column',
+              alignItems: 'center', 
+              justifyContent: 'center', 
+              backgroundColor: 'rgba(255, 255, 255, 0.9)', 
+              zIndex: 1000 
+            }}>
+              <div style={{ marginBottom: 16, color: '#ff4d4f' }}>
+                加载失败: {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 && <div className="sheet_table_footer">