@gientech/modual 2.0.4 → 2.0.5

package/src/modules/databaseTable/index.tsx

@@ -0,0 +1,359 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { uid } from 'uid';
+import AxiosInstance from './server';
+import EditRowDrawer from './EditRowDrawer';
+import { message, Modal } from 'antd';
+import { Xviwer, CustomComponents } from '@mxmweb/xviewer';
+
+import { DashboardContainer, Styles } from '@mxmweb/zui';
+import '@mxmweb/rtext/style.css';
+import '@mxmweb/zui/style.css';
+const { confirm } = Modal;
+
+enum OPT_BTN {
+  DATE = 0,
+  VIEW,
+  ERROR,
+  AUTHORIZE,
+  DELETE,
+  ANALYSIS_OR_EXTRACT,
+  DOWNLOAD,
+  EDIT,
+  ADD,
+  ANALYSIS_CONFIG,
+  AUTHORIZE_CONFIG,
+}
+
+interface DatabaseTableViewProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  dbType: 'DataTable' | 'DirectDB';
+  fileId: string; // 直连是表id,上传文件是文件id
+  tableId: string; //表id
+  dbId: string;
+  tableName: string;
+  styles?: Styles;
+  CustomComponents?: CustomComponents;
+  eventsEmit?: (name: string, data: any) => void;
+  getBtnDisabled?: (type: OPT_BTN, permission: number) => boolean;
+}
+
+export default function DatabaseTableView({
+  url,
+  token,
+  fileId,
+  role,
+  dbType,
+  dbId,
+  tableId,
+  tableName,
+  CustomComponents,
+  eventsEmit,
+  getBtnDisabled,
+}: DatabaseTableViewProps) {
+  // 抽屉状态管理
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const coreRef = useRef<any>(null);
+  const [rowData, setRowData] = useState<{
+    id: string | number;
+    data?: any[];
+  }>();
+  const [data, setData] = useState<any>();
+  const [dataPermission, setDataPermission] = useState<number>();
+
+  const [status, setStatus] = useState<any>({
+    app: 'ready',
+    container: 'ready',
+    content: 'ready',
+  });
+
+  const { getTableDataList, updateTableData, delTableDataById, getFileDataList } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  // 模拟应用初始化过程
+  useEffect(() => {
+    setStatus((prev: any) => ({ ...prev, content: 'loading' }));
+    handleFetchList();
+  }, []);
+
+  const handleFetchList = async () => {
+    try {
+      if (dbType == 'DirectDB') {
+        const res = await getTableDataList({
+          dbId,
+          name: tableName,
+          params: {
+            pageNo: 1,
+            pageSize: 60,
+          },
+        });
+        if (res) {
+          res.columns = (res?.columns || []).map((col: any) => ({
+            ...col,
+            id: col.id || uid(4), //直连数据库没有colId
+          }));
+          res.dataList = (res.dataList || []).map((item: any, idx: number) => ({
+            ...item,
+            __absIndex: idx, // pageNo=1 => 0..(pageSize-1)
+          }));
+          setData(res);
+          setDataPermission(res.permission);
+          setStatus((prev: any) => ({ ...prev, content: 'ready' }));
+        }
+      } else {
+        const res = await getFileDataList({
+          fileId,
+          params: {
+            pageNo: 1,
+            pageSize: 60,
+          },
+        });
+        if (res) {
+          // 为首批数据打上绝对索引，便于核心层定位 UI 页数据
+          // const firstPageSize = 60;
+          res.dataList = (res.dataList || []).map((item: any, idx: number) => ({
+            ...item,
+            __absIndex: idx, // pageNo=1 => 0..(pageSize-1)
+          }));
+          res.columns = (res?.columns || []).map((col: any) => ({
+            ...col,
+            id: col.id || uid(4), //直连数据库没有colId
+          }));
+          setData(res);
+          setDataPermission(res.permission);
+          setStatus((prev: any) => ({ ...prev, content: 'ready' }));
+        }
+      }
+    } catch (e) {
+      console.log('[DatabaseApiError]  getDataList:', e);
+    }
+  };
+
+  const handleData = (data: any) => {
+    const _data = (data?.dataList || []).map((item: any) => {
+      const cols = (data?.columns || []).filter((col: any) => col.physicalName !== 'id');
+      const _data = cols.map((col: any) => ({
+        columnId: col.id,
+        columnName: col.businessName,
+        physicalName: col.physicalName,
+        value: item[col.physicalName] || '-',
+        type: item.dataType == 'DATETIME' ? 'date' : 'paragraph',
+      }));
+      if (dbType == 'DataTable') {
+        _data.push(
+          ...[
+            {
+              columnId: 'actions',
+              value: 'edit',
+              label: '修改',
+              disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, dataPermission),
+            },
+
+            {
+              columnId: 'actions',
+              value: 'delete',
+              label: '删除',
+              disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.DELETE, dataPermission),
+            },
+          ]
+        );
+      }
+
+      return {
+        id: item.id,
+        data: _data,
+        __absIndex: item.__absIndex, // 透传绝对索引，供核心层定位 UI 页
+      };
+    });
+    return _data;
+  };
+
+  const handleTableRows = (data: any) => {
+    const cols = (data?.columns || []).filter((col: any) => col.physicalName !== 'id');
+    const rows = cols.map((col: any) => ({
+      title: dbType == 'DirectDB' ? col.physicalName : col.businessName,
+      id: col.id,
+      type: col.dataType == 'DATETIME' ? 'date' : 'paragraph',
+    }));
+    if (dbType == 'DataTable') {
+      rows.push({ id: 'actions', title: '操作', type: 'action' });
+    }
+
+    return rows;
+  };
+
+  // 事件处理函数
+  const handleEventsEmit = async (name: string, data: any, appFn: any) => {
+    console.log('[DatabaseTableView] eventsEmit:', name, data, appFn);
+    switch (name) {
+      case 'pagination:request_merge_data': {
+        try {
+          const pageNo = data?.request?.pageNo;
+          const pageSize = data?.request?.pageSize;
+          if (!pageNo || !pageSize) return;
+          let res: any;
+          if (dbType == 'DirectDB') {
+            res = await getTableDataList({
+              dbId,
+              name: tableName,
+              params: { pageNo, pageSize },
+            });
+          } else {
+            res = await getFileDataList({
+              fileId,
+              params: { pageNo, pageSize },
+            });
+          }
+
+          if (res) {
+            // 为增量数据打上绝对索引，依据后端分页定位
+            res.dataList = (res.dataList || []).map((item: any, idx: number) => ({
+              ...item,
+              __absIndex: (pageNo - 1) * pageSize + idx,
+            }));
+            res.columns = (res?.columns || []).map((col: any) => ({
+              ...col,
+              id: col.id || uid(4),
+            }));
+            setData((prev: any) => {
+              if (!prev) return res;
+              const prevList = Array.isArray(prev.dataList) ? prev.dataList : [];
+              const newList = Array.isArray(res.dataList) ? res.dataList : [];
+              // 基于 id 去重合并；保留 __absIndex，用于 UI 定位
+              const byId = new Map<string | number, any>();
+              prevList.forEach((it: any) => byId.set(it.id, it));
+              newList.forEach((it: any) => byId.set(it.id, it));
+              const merged = Array.from(byId.values());
+              return {
+                ...prev,
+                dataList: merged,
+                total: prev.total ?? res.total,
+                columns: prev.columns?.length ? prev.columns : res.columns,
+              };
+            });
+          }
+        } catch (e) {
+          console.log('[DatabaseApiError] pagination:request_merge_data:', e);
+        }
+        break;
+      }
+      case 'table_action_edit':
+        setDrawerVisible(true);
+        const _data = (data.data || []).filter((d: any) => {
+          return d.columnId !== 'actions';
+        });
+        setRowData({
+          id: data.id,
+          data: _data,
+        });
+        break;
+      case 'table_action_delete':
+        try {
+          confirm({
+            title: '确认删除数据？',
+            content: '删除后，该数据将无法恢复',
+            okText: '删除',
+            cancelText: '取消',
+            async onOk() {
+              const res = await delTableDataById({ tableId, rowId: data.id });
+              if (res) {
+                message.success('表数据删除成功');
+                // 处理删除逻辑
+                appFn.removeItem(data.id);
+              }
+            },
+            onCancel() {
+              console.log('Cancel');
+            },
+          });
+        } catch (e) {
+          console.log('删除表数据失败');
+        }
+        break;
+      default:
+        eventsEmit?.(name, data);
+        break;
+    }
+  };
+
+  const handleDrawerClose = async (type: 'confirm' | 'cancel', data: any) => {
+    if (type == 'confirm') {
+      // 修改数据提交
+      try {
+        const _data = data.reduce((acc: any, item: any) => {
+          acc[item.physicalName] = item.value;
+          return acc;
+        }, {});
+        const res = await updateTableData(tableId, {
+          ..._data,
+          id: rowData?.id,
+        });
+        if (res && coreRef.current) {
+          message.success('数据修改成功');
+          coreRef.current.appFn.updateItem(data, rowData?.id);
+          // todo: 数据刷新
+        }
+      } catch (e) {
+        console.log('[TableRowApiError] updateTableData:', e);
+      }
+    }
+    setDrawerVisible(false);
+    setRowData(undefined);
+  };
+  // 视图配置
+  const viewConfig = useMemo(
+    () => ({
+      label: '数据库表格',
+      defaultActiveId: 'database-table',
+      model: null,
+      views: [
+        {
+          label: '数据表名称',
+          id: 'database-table',
+          type: 'table',
+          total: data?.totalData || 999,
+          requestPagesize: 60,
+          viewPageSize: 10,
+          allowMultiSelect: false, // 不允许多选，只进行数据展示
+          columns: handleTableRows(data),
+          viewBehavior: 'pagination' as const,
+        },
+      ],
+      dataSource: handleData(data),
+      eventsEmit: handleEventsEmit,
+    }),
+    [data, eventsEmit, dbType, dataPermission]
+  );
+
+  return (
+    <DashboardContainer
+      title={tableName}
+      goBack={() => {
+        eventsEmit?.('goBack', {});
+      }}
+    >
+      <Xviwer
+        ref={coreRef}
+        key="table-data"
+        status={status}
+        CustomComponents={{
+          ...CustomComponents,
+        }}
+        {...viewConfig}
+      />
+      {rowData && (
+        <EditRowDrawer
+          drawerVisible={drawerVisible}
+          tableId={fileId}
+          handleDrawerClose={handleDrawerClose}
+          rowData={rowData}
+        />
+      )}
+    </DashboardContainer>
+  );
+}

package/src/modules/databaseTable/server.ts

@@ -0,0 +1,180 @@
+import axios from 'axios';
+
+type IDataSourceType = 'DataTable' | 'DirectDB';
+
+interface DatabaseApiProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  eventsEmit?: (name: string, data: any) => void;
+}
+
+const AxiosInstance = ({ url, token, role, eventsEmit }: DatabaseApiProps) => {
+  const axios$ = axios.create({
+    baseURL: url,
+    // 配置请求超时时间
+    timeout: 1000000,
+  });
+  // 请求拦截
+  axios$.interceptors.request.use((config: any) => {
+    let target_cookie = token;
+
+    const noA = ['user/login', 'user/kaptcha', 'user/regist'];
+    // dangerous behaviour
+    if (!target_cookie && !noA.some((item: string) => config.url.includes(item))) {
+      // 通过eventsEmit抛出认证错误事件，让调用层处理
+      if (eventsEmit) {
+        eventsEmit('request:error_auth', {
+          errorMsg: '未登录或token已过期',
+          redirect: '/login',
+        });
+      }
+      return Promise.reject(new Error('未登录或token已过期'));
+    }
+
+    config.headers.Authorization = target_cookie || '';
+    // 这里传中文会报错
+    config.headers.userName = role === '未登录用户' ? '' : role;
+    return config;
+  });
+
+  // 返回拦截
+  axios$.interceptors.response.use(
+    response => {
+      // 获取接口返回结果
+      const noA = ['user/kaptcha'];
+      const res = response.data;
+      if (noA.some((item: string) => response.config.url && response.config.url.includes(item))) {
+        return res;
+      }
+      if (res.size && res.type) {
+        return res;
+      }
+      const { success, errorMsg, errorCode } = res;
+
+      if (success) {
+        return res;
+      } else {
+        // 通过eventsEmit抛出业务错误事件，让调用层处理
+        if (eventsEmit) {
+          eventsEmit('request:error_business', {
+            errorCode,
+            errorMsg: errorMsg || '请求出错，请稍后再试',
+            response: res,
+          });
+        }
+      }
+      return false;
+    },
+    error => {
+      // 主动取消请求，不给报错信息
+      if (error.message === 'canceled') {
+        return Promise.reject(error);
+      }
+
+      // 通过eventsEmit抛出网络错误事件，让调用层处理
+      if (eventsEmit) {
+        let errorType = 'request:error_network';
+        let errorData: any = {
+          errorMsg: '网络请求失败',
+          error: error,
+        };
+
+        if (error?.response?.status === 401) {
+          errorType = 'request:error_auth';
+          errorData = {
+            errorMsg: '没有足够权限',
+            error: error,
+            redirect: '/login',
+          };
+        } else if (
+          error?.response?.data?.errorCode === '30013' ||
+          error?.response?.data?.errorCode === '30023'
+        ) {
+          errorType = 'request:error_business';
+          errorData = {
+            errorCode: error?.response?.data?.errorCode,
+            errorMsg: error?.response?.data?.errorMsg || '请求出错，请稍后再试',
+            error: error,
+          };
+        }
+
+        eventsEmit(errorType, errorData);
+      }
+      return Promise.reject(error);
+    }
+  );
+  // 获取表数据
+  const getTableDataList = async ({
+    dbId,
+    name,
+    params,
+  }: {
+    dbId?: string | number;
+    name?: string;
+    params?: any;
+  }) => {
+    try {
+      const res: any = await axios$.get(
+        `/directDB/queryTableData/${dbId}/${name}?${new URLSearchParams(params).toString()}`
+      );
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('getTableDataList error:', e);
+      return false;
+    }
+  };
+  // 获取文件数据
+  // /database/dataTable/queryTableFileData/{fileId}
+  const getFileDataList = async ({ fileId, params }: any) => {
+    try {
+      const res: any = await axios$.get(
+        `/dataTable/queryTableFileData/${fileId}?${new URLSearchParams(params).toString()}`
+      );
+      const { success, data } = res;
+      if (success) return data;
+      return false;
+    } catch (e) {
+      console.log('e', e);
+      return false;
+    }
+  };
+  // 编辑表数据
+  // /database/dataTable/dataUpdateRow/{tableId}
+  const updateTableData = async (tableId: string | number, params: any) => {
+    try {
+      const res: any = await axios$.post(`/dataTable/dataUpdateRow/${tableId}`, {
+        ...params,
+      });
+
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('updateTableData error:', e);
+      return false;
+    }
+  };
+
+  //删除表数据
+  // /database/dataTable/dataDeleteRow/{tableId}/{rowId}
+  const delTableDataById = async ({ tableId, rowId }: any) => {
+    try {
+      const res: any = await axios$.delete(`/dataTable/dataDeleteRow/${tableId}/${rowId}`);
+
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('delTableDataById error:', e);
+    }
+  };
+
+  return {
+    getTableDataList,
+    updateTableData,
+    delTableDataById,
+    getFileDataList,
+  };
+};
+
+export default AxiosInstance;