@gientech/modual 2.0.5 → 2.0.7

package/src/modules/databaseId/index.tsx

@@ -1,769 +0,0 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { message, Modal, theme } from 'antd';
-import { uid } from 'uid';
-import { TriangleAlert, Upload } from 'lucide-react';
-import { DashboardContainer, defaultTheme, type Styles } from '@mxmweb/zui';
-import { Xviwer, CustomComponents } from '@mxmweb/xviewer';
-import '@mxmweb/rtext/style.css';
-import '@mxmweb/zui/style.css';
-import UploadDrawer from './UploadDrawer';
-import EditConfigDrawer from './EditConfig';
-
-import AxiosInstance from './server';
-import {
-  StatusComponent,
-  TableMetaDescriptionCom,
-  statusArr,
-  EmptyData,
-  OPT_BTN,
-  DescStatus,
-} from './CustomCom';
-const { confirm } = Modal;
-
-interface DatabaseViewAdopterProps {
-  url?: string;
-  token?: string;
-  role?: string;
-  id: string;
-  styles?: Styles;
-  dbType: 'DataTable' | 'DirectDB';
-  uploadUrl: string;
-  CustomComponents?: CustomComponents;
-  eventsEmit?: (name: string, data: any) => void;
-  getBtnDisabled?: (type: OPT_BTN, permission: number) => boolean;
-}
-
-const DatabaseViewAdopter: React.FC<DatabaseViewAdopterProps> = props => {
-  const { url, token, role, id, dbType, CustomComponents, getBtnDisabled, uploadUrl } = props;
-
-  const [status, setStatus] = useState<any>({
-    container: 'ready',
-    content: 'ready',
-  });
-  // 创建ref来访问核心组件实例
-  const coreRef = useRef<any>(null);
-  // 轮询定时器引用，避免重复定时与内存泄漏
-  const pollTimerRef = useRef<any>(null);
-  //表数据
-  const [tableData, setTableData] = useState<
-    {
-      id: string;
-      data?: any[];
-      children?: {
-        [key: string]: {
-          id: string;
-          data?: any[];
-        }[];
-      };
-      expanded?: boolean;
-    }[]
-  >();
-
-  // 管理子table的pending状态，用于动画
-  const [subTablePendingIds, setSubTablePendingIds] = useState<{ [viewKey: string]: string[] }>({});
-
-  // 数据库信息
-  const [dbInfo, setDBInfo] = useState<any>();
-
-  // 抽屉状态管理
-  const [drawerVisible, setDrawerVisible] = useState(false);
-  const [drawerTitle, setDrawerTitle] = useState('');
-  const [tableInfo, setTableInfo] = useState<any>();
-
-  // 修改数据配置
-  const [configDrawerVisible, setConfigDrawerVisible] = useState(false);
-  const [configDrawerTitle, setConfigDrawerTitle] = useState('');
-
-  const {
-    getTableList,
-    delTableById,
-    delFileById,
-    updateTableInfo,
-    optimizeDesc,
-    getTableTreeList,
-    reParseFile,
-    getDBDetailById,
-  } = AxiosInstance({
-    url,
-    token,
-    role,
-    eventsEmit: props.eventsEmit,
-  });
-
-  // 模拟应用初始化过程
-  useEffect(() => {
-    if (id && dbType) {
-      setStatus((prev: any) => ({ ...prev, container: 'loading' }));
-      getDatabaseDetail();
-    }
-    return () => {
-      if (pollTimerRef.current) {
-        clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = null;
-      }
-    };
-  }, [id, dbType]);
-
-  const getDatabaseDetail = async () => {
-    try {
-      const res = await getDBDetailById(id, dbType);
-      if (res) {
-        setDBInfo(res);
-        setStatus((prev: any) => ({ ...prev, container: 'ready', content: 'loading' }));
-      }
-    } catch (e) {
-      console.log('[TableApiError] getDBInfo:', e);
-    }
-    // 获取详情后开始轮询拉取列表
-    await pollFetchList();
-  };
-
-  const handleFetchList = async (): Promise<any[] | undefined> => {
-    try {
-      if (dbType == 'DirectDB') {
-        const res = await getTableList(id);
-        if (res) {
-          const _data = generateDirectDBDatas(res);
-          setTableData(_data || []);
-          setStatus((prev: any) => ({ ...prev, content: 'ready' }));
-          return _data || [];
-        } else {
-          setStatus((prev: any) => ({ ...prev, content: 'error' }));
-        }
-      } else {
-        const res = await getTableTreeList(id);
-        if (res) {
-          const _data = generateDataTableDatas(res);
-          setTableData(_data || []);
-          setStatus((prev: any) => ({ ...prev, content: 'ready' }));
-          return _data || [];
-        } else {
-          setStatus((prev: any) => ({ ...prev, content: 'error' }));
-        }
-      }
-    } catch (e) {
-      console.log('[TableApiError]  getTableList:', e);
-    }
-    return undefined;
-  };
-
-  // 处理 上传数据库类型 的 表list数据
-  function generateDataTableDatas(data: any[]) {
-    return (data || []).map((_t, i) => {
-      let status = statusArr.find((s: any) => s.status == _t.status);
-
-      const importStatus = _t.children.some((c: any) => c.status == '00'); // 子列表于一个导入失败，父表显示追加失败
-
-      return {
-        id: _t.fileId.toString(),
-        tableId: _t.tableId,
-        data: [
-          { columnId: 'name', value: _t?.originalFilename || '-', type: 'label' },
-          {
-            columnId: 'description',
-            value: _t?.tableMeta?.description,
-            type: 'customized',
-            tableMeta: _t?.tableMeta,
-          },
-          { columnId: 'count', value: `${_t.rowCount}行，${_t.columnCount}列`, type: 'text' },
-          { columnId: 'status', ...status, type: 'customized', errorMsg: _t.errorMsg },
-          { columnId: 'importstatus', value: importStatus, type: 'customized' },
-          {
-            columnId: 'createdAt',
-            value: _t.gmtCreate,
-            type: 'date',
-          },
-          {
-            columnId: 'updatedAt',
-            value: _t.gmtModified,
-            type: 'date',
-          },
-          ...(_t.status == '30'
-            ? [
-                {
-                  columnId: 'actions',
-                  value: 'view',
-                  label: '查看',
-                  type: 'action',
-                  disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.VIEW, _t.permission),
-                },
-                {
-                  columnId: 'actions',
-                  value: 'edit',
-                  label: '修改配置',
-                  type: 'action',
-                  disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, _t.permission),
-                },
-                {
-                  columnId: 'actions',
-                  value: 'addData',
-                  label: '追加数据',
-                  type: 'action',
-                  disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, _t.permission),
-                },
-              ]
-            : []),
-          ...(_t.status == '00'
-            ? [
-                {
-                  columnId: 'actions',
-                  value: 'reValidate',
-                  label: '重新导入',
-                  type: 'action',
-                },
-              ]
-            : []),
-          {
-            columnId: 'actions',
-            value: 'delete',
-            label: '删除',
-            type: 'action',
-            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.DELETE, _t.permission),
-          },
-        ],
-        expanded: false,
-        ...(_t.children &&
-          _t.children?.length > 0 && {
-            children: [
-              ...(_t.children || []).map((_c: any) => {
-                const c_status = statusArr.find((s: any) => s.status == _c.status);
-
-                const data = [
-                  { columnId: 'name', value: _c.originalFilename, type: 'text' },
-                  {
-                    columnId: 'count',
-                    value: `${_c.rowCount}行，${_c.columnCount}列`,
-                    type: 'text',
-                  },
-                  {
-                    columnId: 'status',
-                    ...c_status,
-
-                    errorMsg: _c.errorMsg,
-                    type: 'customized',
-                  },
-                  {
-                    columnId: 'createdAt',
-                    value: _c.gmtCreate,
-                    type: 'date',
-                  },
-                  {
-                    columnId: 'updatedAt',
-                    value: _c.gmtModified,
-                    type: 'date',
-                  },
-                  ...(_c.status == '30'
-                    ? [
-                        {
-                          columnId: 'actions',
-                          value: 'view',
-                          label: '查看',
-                          type: 'action',
-                          disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.VIEW, _c.permission),
-                        },
-                      ]
-                    : []),
-                  ...(_c.status == '00'
-                    ? [
-                        {
-                          columnId: 'actions',
-                          value: 'reValidate',
-                          label: '重新导入',
-                          type: 'action',
-                          disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.ADD, _c.permission),
-                        },
-                      ]
-                    : []),
-                  {
-                    columnId: 'actions',
-                    value: 'delete_sub',
-                    label: '删除',
-                    type: 'action',
-                    disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.DELETE, _c.permission),
-                  },
-                ];
-                return {
-                  id: _c.fileId.toString(),
-                  tableId: _c.tableId,
-                  data: data,
-                };
-              }),
-            ],
-          }),
-      };
-    });
-  }
-
-  // 处理 直连数据库类型 的 表list数据
-  function generateDirectDBDatas(data: any[]) {
-    return (data || []).map((_t, i) => {
-      return {
-        id: _t.id || uid(8),
-        data: [
-          { columnId: 'name', value: _t.physicalName },
-          {
-            columnId: 'cnname',
-            value: _t.businessName,
-          },
-          { columnId: 'colcount', value: _t.columnCount },
-
-          { columnId: 'count', value: `${_t.rowCount}行，${_t.columnCount}列` },
-          {
-            columnId: 'actions',
-            value: 'view',
-            label: '查看',
-            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.VIEW, _t.permission),
-          },
-        ],
-      };
-    });
-  }
-
-  // 事件分流函数，先处理核心层UI/动画，再决定是否向上透传
-  async function handleEventsEmit(name: string, data: any, appFn: any) {
-    console.log('[adopter] mergedEventsEmit', name, data, appFn);
-    // 1. 先处理核心层UI/动画/数据
-    switch (name) {
-      case 'table_action_delete': {
-        try {
-          console.log('[delete] 删除事件数据:', data);
-          // 确保 data 有 tableId 和 id
-          if (!data || (!data.tableId && !data.id)) {
-            console.error('[delete] 删除事件数据不完整:', data);
-            message.error('删除失败：数据不完整');
-            return;
-          }
-          const tableId = data.tableId || data.id;
-          const rowId = data.id;
-
-          confirm({
-            title: '确认删除数据库？',
-            content: '该数据表及其追加数据都将被删除且无法恢复',
-            icon: <TriangleAlert color="#FF4D4F" className="mr-[8px]" />,
-            okText: '删除',
-            cancelText: '取消',
-            async onOk() {
-              const res = await delTableById(tableId, dbType);
-              if (res && coreRef?.current) {
-                coreRef?.current.appFn.removeItem(rowId);
-                message.success(`删除成功`);
-              } else {
-                message.error('删除失败');
-              }
-            },
-          });
-        } catch (e) {
-          console.error('删除表数据失败:', e);
-          message.error('删除失败');
-        }
-        break;
-      }
-      case 'table_action_edit': {
-        setConfigDrawerTitle('修改数据配置');
-        setConfigDrawerVisible(true);
-        setTableInfo(data);
-        break;
-      }
-      //上传
-      case 'toolbar_upload': {
-        setDrawerTitle('上传数据文件');
-        setDrawerVisible(true);
-        break;
-      }
-      //追加
-      case 'table_action_addData': {
-        setDrawerTitle('追加数据');
-        setDrawerVisible(true);
-        setTableInfo(data);
-        break;
-      }
-
-      //重新导入
-      case 'table_action_reValidate': {
-        const res = await reParseFile(data.id);
-        if (res) {
-          if (pollTimerRef.current) {
-            clearTimeout(pollTimerRef.current);
-            pollTimerRef.current = null;
-          }
-          await pollFetchList();
-        }
-        break;
-      }
-
-      //修改表配置
-      case 'table_info:update': {
-        try {
-          if (tableInfo?.id) {
-            const tbTitle = tableInfo?.data.find((d: any) => d.columnId == 'name').value || '-';
-            const res = await updateTableInfo({
-              tableId: tableInfo.tableId,
-              description: data,
-              businessName: tbTitle,
-            });
-            if (res && coreRef?.current) {
-              const patch = {
-                ...tableInfo,
-                data: tableInfo.data.map((d: any) => {
-                  if (d.columnId == 'description') {
-                    return {
-                      ...d,
-                      value: data,
-                    };
-                  } else {
-                    return d;
-                  }
-                }),
-              };
-              coreRef?.current.appFn.updateItem(patch, tableInfo.id);
-              message.success('修改配置成功');
-            }
-          }
-        } catch (e) {
-          console.error('修改配置失败', e);
-        } finally {
-          handleDrawerClose();
-        }
-        break;
-      }
-
-      //子表删除
-      case 'table_action_delete_sub': {
-        try {
-          confirm({
-            title: '确认删除数据？',
-            content: '删除后，该数据将无法恢复',
-            okText: '删除',
-            cancelText: '取消',
-            async onOk() {
-              const { id, tableId } = data;
-
-              const res = await delFileById(data.id);
-              if (res && coreRef?.current) {
-                setSubTablePendingIds(prev => ({
-                  ...prev,
-                  [tableId]: [...(prev[tableId] || []), id],
-                }));
-                if (data.data.find((d: any) => d.status == '00')) {
-                  // 如果子表有导入失败的，删除之后刷新
-                  if (pollTimerRef.current) {
-                    clearTimeout(pollTimerRef.current);
-                    pollTimerRef.current = null;
-                  }
-                  pollFetchList();
-                }
-                appFn.removeItem(id, tableId);
-
-                message.success('追加文件数据删除成功');
-              }
-            },
-          });
-        } catch (e) {
-          console.log('删除表数据失败');
-        }
-        break;
-      }
-
-      case 'toolbar_auth': {
-        if (typeof props.eventsEmit === 'function') {
-          // 兼容只传2个参数的业务层eventsEmit
-
-          props.eventsEmit('toolbar_auth', dbInfo);
-        }
-        break;
-      }
-
-      default:
-        // 2. 透传到业务层（如有需要）
-        if (typeof props.eventsEmit === 'function') {
-          // 兼容只传2个参数的业务层eventsEmit
-
-          props.eventsEmit(name, data);
-        }
-        break;
-    }
-  }
-  // 根据数据库类型动态生成views配置
-  const directDBViewConfig = useMemo(
-    () => ({
-      label: '数据表管理',
-      model: null,
-      defaultActiveId: 'direct-table-view',
-      views: [
-        {
-          label: '我的数据库',
-          id: 'direct-table-view',
-          type: 'table' as const,
-          viewBehavior: 'pagination' as const, //or pagination
-          allowMultiSelect: false,
-          columns: [
-            { id: 'name', title: '数据表英文名称', type: 'label' },
-            { id: 'cnname', title: '数据表中文名称', type: 'label' },
-            { id: 'colcount', title: '字段数', type: 'text' },
-            { id: 'count', title: '数据量', type: 'text' },
-            { id: 'actions', title: '操作', type: 'action' },
-          ],
-
-          toolbar: [
-            {
-              type: 'fuzzy_search' as const,
-              key: 'search',
-              label: '搜索',
-              searchKeys: ['name', 'description'],
-              position: 'right',
-            },
-            {
-              type: 'button',
-              key: 'auth',
-              label: '配置',
-              btnType: 'default' as const,
-              position: 'right',
-            },
-          ],
-        },
-      ],
-    }),
-    [tableData, dbType]
-  );
-
-  const dataTableViewConfig = useMemo(
-    () => ({
-      label: '数据表管理',
-      model: null,
-      defaultActiveId: 'data-table-view',
-      views: [
-        {
-          label: '上传数据列表',
-          id: 'data-table-view',
-          type: 'table' as const,
-          viewBehavior: 'pagination' as const, //or pagination
-          allowMultiSelect: false,
-          viewPageSize: 10,
-          columns: [
-            { id: 'name', title: '文件名', type: 'label', tip: '文件名' },
-            {
-              id: 'description',
-              title: '描述',
-              type: 'customized',
-              component: <TableMetaDescriptionCom />,
-              helpText:
-                '打开自动生成描述开关后，若描述未正常生成，则描述内容为空，如您仍然需要描述，则需要手动添加',
-            },
-            { id: 'count', title: '数据量', type: 'text', tip: '数据量' },
-            {
-              id: 'status',
-              title: '导入状态',
-              type: 'customized',
-              component: <StatusComponent />,
-            },
-            {
-              id: 'importstatus',
-              title: '追加提示',
-              type: 'customized',
-              component: <StatusComponent />,
-            },
-            { id: 'createdAt', title: '创建时间', type: 'date', tip: '创建时间' },
-            { id: 'updatedAt', title: '更新时间', type: 'date', tip: '更新时间' },
-            { id: 'actions', title: '操作', type: 'action' },
-          ],
-
-          toolbar: [
-            {
-              type: 'button' as const,
-              key: 'upload',
-              label: '上传数据文件',
-              btnType: 'primary' as const,
-              disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.ADD, dbInfo?.permission),
-              icon: <Upload size={12} />,
-            },
-            {
-              type: 'fuzzy_search' as const,
-              key: 'search',
-              label: '搜索',
-              searchKeys: ['name', 'description', ['name']],
-              position: 'right',
-            },
-            {
-              type: 'button',
-              key: 'auth',
-              label: '配置',
-              btnType: 'default' as const,
-              position: 'right',
-            },
-          ],
-        },
-      ],
-      subTableConfig: {
-        type: 'table' as const,
-        allowMultiSelect: false,
-        viewBehavior: 'pagination' as const, //or pagination
-        viewPageSize: 5,
-        columns: [
-          { title: '追加文件名', id: 'name', type: 'text', tip: '追加文件名' },
-          { title: '数据量', id: 'count', type: 'text', tip: '数据量' },
-          {
-            id: 'status',
-            title: '导入状态',
-            type: 'customized',
-            tip: '导入状态',
-            component: <StatusComponent />,
-          },
-          { title: '创建时间', id: 'createdAt', type: 'date', tip: '创建时间' },
-          { title: '更改时间', id: 'updatedAt', type: 'date', tip: '更改时间' },
-          { title: '操作', id: 'actions', type: 'action' },
-        ],
-      },
-      // 传递子table的pending状态
-      subTablePendingIds: subTablePendingIds,
-      // 子table动画完成回调
-      onSubTableRowAnimationComplete: (viewKey: string, rowId: string) => {
-        // 清除pending状态
-        setSubTablePendingIds(prev => ({
-          ...prev,
-          [viewKey]: (prev[viewKey] || []).filter(id => id !== rowId),
-        }));
-      },
-    }),
-    [subTablePendingIds, tableData, dbType, dbInfo]
-  );
-
-  // 抽屉相关处理函数
-  const handleDrawerClose = (type?: 'refresh') => {
-    setDrawerVisible(false);
-    setConfigDrawerVisible(false);
-    setTableInfo(undefined);
-    if (type == 'refresh') {
-      // 关闭抽屉后静默轮询刷新列表
-      if (pollTimerRef.current) {
-        clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = null;
-      }
-      pollFetchList();
-    }
-  };
-
-  // 检查所有数据及其 children 的 status 是否都不是 '11' 或 '20'
-  function isAllFinished(data: any[]): boolean {
-    if (!Array.isArray(data)) return true;
-
-    for (const item of data) {
-      if (item.data) {
-        const statusCell = item.data.find((d: any) => d.columnId === 'status');
-        const descCell = item.data.find((d: any) => d.columnId === 'description');
-        // 导入中 20，导入中未建表 11，自动生成描述生成中，这三个状态时，轮询
-        console.log(
-          '+++++',
-          statusCell.status === '20' ||
-            statusCell.status === '11' ||
-            descCell?.tableMeta?.generateDescriptionStatus == DescStatus.GENERATING
-        );
-        if (
-          statusCell &&
-          (statusCell.status === '20' ||
-            statusCell.status === '11' ||
-            descCell?.tableMeta?.generateDescriptionStatus == DescStatus.GENERATING)
-        ) {
-          return false;
-        }
-      }
-      if (Array.isArray(item.children)) {
-        for (const child of item.children) {
-          if (child.data) {
-            const statusCell = child.data.find((d: any) => d.columnId === 'status');
-            // 子表无需生成描述
-            if (statusCell && (statusCell.status === '20' || statusCell.status === '11')) {
-              return false;
-            }
-          }
-        }
-      }
-    }
-    return true;
-  }
-
-  // 轮询 handleFetchList，直到所有 status 完成
-  const pollFetchList = async () => {
-    const latest = await handleFetchList();
-    const finished = isAllFinished(latest || []);
-    if (!finished) {
-      if (pollTimerRef.current) {
-        clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = null;
-      }
-      pollTimerRef.current = setTimeout(() => {
-        pollFetchList();
-      }, 5000);
-    } else {
-      if (pollTimerRef.current) {
-        clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = null;
-      }
-    }
-  };
-
-  return (
-    <DashboardContainer
-      title={dbInfo?.name}
-      description={dbInfo?.description || '-'}
-      goBack={() => {
-        props.eventsEmit?.('goBack', {});
-      }}
-    >
-      <Xviwer
-        dataSource={tableData}
-        ref={coreRef}
-        eventsEmit={handleEventsEmit}
-        status={status}
-        styles={{
-          theme: {
-            ...defaultTheme,
-            colors: {
-              ...defaultTheme.colors,
-              tableFirstColumnBg: '#ffffff',
-              tableLastColumnBg: '#ffffff',
-              paginationBackground: '#ffffff',
-              subTableBackground: '#F5F5F5',
-              tableHeaderBg: '#F5F5F5',
-            },
-          },
-          mode: 'light',
-        }}
-        CustomComponents={{
-          EmptyData: () => (
-            <EmptyData
-              dbInfo={dbInfo}
-              setDrawerTitle={setDrawerTitle}
-              setDrawerVisible={setDrawerVisible}
-              getBtnDisabled={getBtnDisabled}
-            />
-          ),
-
-          ...CustomComponents,
-        }}
-        {...(dbType == 'DataTable' ? dataTableViewConfig : directDBViewConfig)}
-      />
-      {/* 右侧抽屉 - 添加数据库连接 */}
-      <UploadDrawer
-        drawerTitle={drawerTitle}
-        drawerVisible={drawerVisible}
-        handleDrawerClose={handleDrawerClose}
-        dbId={id}
-        token={token}
-        url={url}
-        uploadUrl={uploadUrl}
-        role={role}
-        tableInfo={tableInfo}
-      />
-      <EditConfigDrawer
-        drawerTitle={configDrawerTitle}
-        drawerVisible={configDrawerVisible}
-        handleDrawerClose={handleDrawerClose}
-        tableInfo={tableInfo}
-        optimizeDesc={optimizeDesc}
-        eventsEmit={handleEventsEmit}
-      />
-    </DashboardContainer>
-  );
-};
-
-export default DatabaseViewAdopter;