@gientech/modual 1.3.2 → 1.3.3

package/src/modules/databaseId/index.tsx

@@ -0,0 +1,734 @@
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { message, Modal } from 'antd';
+import { uid } from 'uid';
+import { TriangleAlert, Upload } from 'lucide-react';
+import { DashboardContainer, Styles } from '@mxmweb/zui';
+import { Xviwer, CustomComponents } from '@mxmweb/xviewer';
+
+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';
+  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 } = 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 {
+          confirm({
+            title: '确认删除数据库？',
+            content: '该数据表及其追加数据都将被删除且无法恢复',
+            icon: <TriangleAlert color="#FF4D4F" className="mr-[8px]" />,
+            okText: '删除',
+            cancelText: '取消',
+            async onOk() {
+              const res = await delTableById(data.tableId, dbType);
+              if (res && coreRef?.current) {
+                coreRef?.current.appFn.removeItem(data.id);
+                message.success(`删除成功`);
+              }
+            },
+          });
+        } catch (e) {
+          console.log('删除表数据失败');
+        }
+        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，自动生成描述生成中，这三个状态时，轮询
+        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}
+        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}
+        role={role}
+        tableInfo={tableInfo}
+      />
+      <EditConfigDrawer
+        drawerTitle={configDrawerTitle}
+        drawerVisible={configDrawerVisible}
+        handleDrawerClose={handleDrawerClose}
+        tableInfo={tableInfo}
+        optimizeDesc={optimizeDesc}
+        eventsEmit={handleEventsEmit}
+      />
+    </DashboardContainer>
+  );
+};
+
+export default DatabaseViewAdopter;