@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/components/CrudTable.tpl

@@ -0,0 +1,650 @@
+import { CloudDownloadOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { cfmmUtils, ImportExecl, useIntl } from '@umijs/max';
+import { Button, Dropdown, MenuProps, Modal } from 'antd';
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useAction from '../hooks/useAction';
+import useAuthority from '../hooks/useAuthority';
+import useMemoizedFn from '../hooks/useMemoizedFn';
+import useQueryTableList from '../hooks/useQueryTableList';
+import { API, CrudTableConfig, CrudTableRefType, ExprotMultiLangListItem, LangInfoItem, RefDrawerFormRefType } from '../types';
+import ActionLogDrawer from './ActionLogDrawer';
+import CreateForm from './AddDrawerForm';
+import DropdownButton from './DropdownButton';
+import EditMultiLangForm from './EditMultiLangForm';
+import MyFooterToolbar from './MyFooterToolbar';
+import ViewTableItemDrawer from './ViewTableItemDrawer';
+import { genExcelAdvanced } from '../utils/excelHelper';
+import { importMultiLangList, queryI18nExprotList, queryLangInfoExprotList } from '../services';
+import { handleImportList } from '../utils/importHelper';
+
+const { confirm } = Modal;
+export const TABLE_SCROLL = { x: 'max-content' };
+
+// 生成默认权限码
+const generateDefaultAuthCodes = (localCode: string | undefined) => {
+  if (!localCode) return {};
+
+  const secondPart = localCode.split('.')?.[1];
+  if (!secondPart) return {};
+
+  // 首字母小写的驼峰命名
+  const baseCode = secondPart.charAt(0).toLowerCase() + secondPart.slice(1);
+
+  return {
+    view: `${baseCode}_view`,
+    add: `${baseCode}_add`,
+    edit: `${baseCode}_edit`,
+    remove: `${baseCode}_remove`,
+    record: `${baseCode}_record`,
+    lang: `${baseCode}_lang`,
+  };
+};
+
+function CrudTable<T extends Record<string, any>, U = {}, C = {}>(
+  props: CrudTableConfig<T, U, C>,
+  ref: ForwardedRef<CrudTableRefType<T>>,
+) {
+  const {
+    version = 'v2',
+    baseLocalCode,
+    baseLocalName,
+    rowKey,
+    multiLang,
+    authCodes = {},
+    apis,
+    interceptors = {},
+    columns,
+    tableProps = {},
+    createConfig = {},
+    updateConfig = {},
+    actionColumnConfig = {} as CrudTableConfig['actionColumnConfig'],
+    onAdd,
+    onAfterSearch,
+    onBeforeEdit,
+    onBeforeDelete,
+    onAfterDelete,
+    onBeforeAction,
+    onAfterAction,
+  } = props;
+
+  const defaultAuthCodes = {
+    ...generateDefaultAuthCodes(baseLocalCode),
+    ...authCodes,
+  };
+
+  const { formatMessage } = useIntl();
+  const { getAuthorityFn } = useAuthority();
+  const actionRef = useRef<ActionType>();
+  const updateDrawerRef = useRef<RefDrawerFormRefType>();
+
+  // 状态管理
+  const [tableList, setTableList] = useState<T[]>([]);
+  const [actionLogRow, setActionLogRow] = useState<T>();
+  const [viewRow, setViewRow] = useState<T>();
+  const [editRow, setEditRow] = useState<Partial<T> | null>(null);
+  const [selectedRows, setSelectedRows] = useState<T[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
+
+  // 多语言编辑状态
+  const [editLangModalOpen, setEditLangModalOpen] = useState<boolean>(false);
+  const [currentLangInfo, setCurrentLangInfo] = useState<LangInfoItem | undefined>();
+
+  // Hooks
+  const { queryList } = useQueryTableList(baseLocalCode ? { baseLocalCode, baseLocalName } : undefined);
+  const { doAction, loading: actionLoading } = useAction(baseLocalCode ? { baseLocalCode, baseLocalName } : undefined);
+
+  /**
+   * 处理多语言字段点击
+   */
+  const handleMultiLangClick = useMemoizedFn((record: T, fieldConfig: any) => {
+    if (fieldConfig.onClick) {
+      const langInfo = fieldConfig.onClick(record);
+      setCurrentLangInfo(langInfo);
+    } else {
+      // 默认处理逻辑
+      const langInfo: LangInfoItem = {
+        tableName: fieldConfig.tableName,
+        columnName: fieldConfig.columnName,
+        recordId: record[rowKey] as string,
+      };
+      setCurrentLangInfo(langInfo);
+    }
+    setEditLangModalOpen(true);
+  });
+
+  const queryMultiLangData = useMemoizedFn(async (tableName: string, columnName: string): Promise<ExprotMultiLangListItem[]> => {
+    if(!multiLang) return [];
+
+    if(multiLang.multiLangList) {
+      return multiLang.multiLangList;
+    }
+
+    if (multiLang.queryExprotMultiLangData) {
+      return await multiLang.queryExprotMultiLangData(tableName, columnName);
+    }
+
+    const result = await doAction('GET', { tableName, columnName }, {
+      actionFn: version === 'v1' ? queryLangInfoExprotList : queryI18nExprotList,
+    });
+
+    if (result.success && result.data) {
+      return result.data;
+    }
+    return [];
+  });
+
+  const handleExportMultiLang = useMemoizedFn(async () => {
+    if(multiLang?.exportMultiLangData) {
+      return await multiLang.exportMultiLangData();
+    }
+
+    if (!multiLang?.fields) return false;
+
+    const title = formatMessage({
+      id: `${baseLocalCode}.title`,
+      defaultMessage: '数据列表',
+    });
+
+    const codeList = ['recordId', 'recordValue', 'zh_CN', 'zh_TW', 'en_US', 'th_TH'];
+
+    const { tableName, columnName } = multiLang.fields[0];
+    const data = await queryMultiLangData(tableName, columnName);
+    
+    if(!data.length) return;
+
+    const handleData = data.map(item => [item.recordId, version === 'v1' ? item.recordValue : item.columnValue, item.zh_CN, item.zh_TW, item.en_US, item.th_TH]);
+
+    genExcelAdvanced(
+      `${title}.xlsx`,
+      title,
+      ['ID', '原始值（original）', '中文简体（zh_CN）', '中文繁体（zh_TW）', '英文（en_US）', '泰文（th_TH）'],
+      handleData,
+      {
+        codeColumns: codeList,
+        title: title,
+        titleStyle: { fontSize: 18, bold: true },
+        notice: [formatMessage({ id: 'cfmmUI.common.button.exportMultiLang.notice', defaultMessage: '请勿修改表格结构' })],
+        worksheetColumns: new Array(codeList.length).fill('').map((item, index) => ({ hidden: index == 0, width: 25 })),
+        lockedColumns: [0], // 第一列不允许修改
+      }
+    );
+    return false;
+  });
+
+  // 导入多语言数据
+  const importMultiLang = useMemoizedFn(async (list: any[]) => {
+    if(!multiLang?.fields) return;
+
+    const { tableName, columnName } = multiLang.fields[0];
+
+    if(multiLang.importMultiLangData) {
+      return await multiLang.importMultiLangData(list, tableName, columnName);
+    }
+    
+    // 处理导入数据，正确赋值字段以及转格式
+    const newList = handleImportList<ExprotMultiLangListItem>(list, { needHandleUnderline: false });
+
+    // 导入校验提示
+    // const errorMessageList = checkImportExecl(newList);
+    // if (errorMessageList.length) {
+    //   showCheckErrorTips(errorMessageList);
+    //   return Promise.resolve({ success: false });
+    // }
+
+    const result =  await doAction('IMPORT', {
+      tableName: tableName,
+      columnName: columnName,
+      langInfos: newList.filter(item => item.en_US || item.zh_CN || item.zh_TW || item.th_TH),
+    }, {
+      actionFn: importMultiLangList,
+      showMsg: false,
+    });
+
+    if (result.success) {
+      actionRef.current?.reload();
+    }
+    return result;
+  });
+
+  /**
+   * 查询表格数据
+   */
+  const handleSearch = useMemoizedFn(async (params: any) => {
+    // 请求前拦截器
+    let processedParams = params;
+    if (interceptors.query?.request) {
+      processedParams = interceptors.query.request(params);
+    }
+
+    const result = await queryList<T[]>(processedParams, {
+      queryFn: apis.query,
+    });
+
+    // 请求后拦截器
+    let processedResult = result;
+    if (interceptors.query?.response) {
+      processedResult = interceptors.query.response(result);
+    }
+
+    onAfterSearch?.(processedResult);
+    setTableList(processedResult.data);
+    return processedResult;
+  });
+
+  /**
+   * 通用操作处理
+   */
+  const handleAction = useMemoizedFn(async (method: API.MethodTypes, fields: any): Promise<boolean> => {
+    // 自定义操作前处理
+    if (onBeforeAction) {
+      const canAction = await onBeforeAction(method, fields);
+      if (!canAction) return false;
+    }
+
+    // 请求前拦截器
+    let processedMethod = method;
+    let processedFields = fields;
+    if (interceptors.handle?.request) {
+      const intercepted = interceptors.handle.request(method, fields);
+      processedMethod = intercepted.method ?? method;
+      processedFields = intercepted.data;
+    }
+
+    const { success } = await doAction(processedMethod, processedFields, {
+      actionFn: apis.handle,
+    });
+
+    // 请求后拦截器
+    let processedSuccess = success;
+    if (interceptors.handle?.response) {
+      processedSuccess = interceptors.handle.response(processedMethod, { success });
+    }
+
+    onAfterAction?.(processedMethod, processedSuccess);
+
+    return processedSuccess;
+  });
+
+  /**
+   * 编辑操作
+   */
+  const handleClickEdit = useMemoizedFn(async (record: T) => {
+    if (actionLoading) return;
+
+    // 自定义编辑前处理
+    let editData = record;
+    if (onBeforeEdit) {
+      const result = await onBeforeEdit(record);
+      if (!result) return;
+      editData = result;
+    }
+
+    // 如果有详情查询API，先查询详情
+    if (apis.queryById) {
+      // 请求前拦截器
+      let processedId = record[rowKey];
+      if (interceptors.queryById?.request) {
+        processedId = interceptors.queryById.request(record[rowKey]);
+      }
+
+      const { success, data } = await doAction('GET', processedId, {
+        actionFn: apis.queryById,
+      });
+
+      if (!success || !data) return;
+
+      // 请求后拦截器
+      let processedData = data;
+      if (interceptors.queryById?.response) {
+        processedData = interceptors.queryById.response({ success, data });
+      }
+
+      editData = processedData;
+    }
+
+    updateDrawerRef.current?.show();
+    setEditRow(editData);
+  });
+
+  /**
+   * 删除操作
+   */
+  const handleDelete = useMemoizedFn(async (keys: React.Key[]) => {
+    // 自定义删除前处理
+    if (onBeforeDelete) {
+      const canDelete = await onBeforeDelete(keys);
+      if (!canDelete) return;
+    }
+
+    confirm({
+      title: formatMessage({
+        id: `${baseLocalCode}.delete.title`,
+        defaultMessage: '删除确认',
+      }),
+      content: formatMessage({
+        id: `${baseLocalCode}.delete.confirmMessage`,
+        defaultMessage: '确定要删除选中的项目吗？',
+      }),
+      onOk: async () => {
+        const result = await handleAction('DELETE', keys);
+        onAfterDelete?.(keys, result);
+
+        if (result && actionRef.current) {
+          actionRef.current.clearSelected!();
+          actionRef.current.reload();
+        }
+      },
+    });
+  });
+
+  /**
+   * 增强的列配置（添加操作列）
+   */
+  const enhancedColumns = useMemo<ProColumns<T>[]>(() => {
+    let newColumns = [...columns];
+    // 加入多语言列，如果多语言列存在，则替换原来的列
+    if (multiLang?.fields.length) {
+      newColumns = columns.map((column) => {
+        const multiLangField = multiLang.fields.find((field) => field.fieldName === column.dataIndex);
+        if (multiLangField) {
+          return {
+            ...column,
+            render: (text, record, index, action, schema) => {
+              const originalContent: any = column.render ? column.render(text, record, index, action, schema) : text;
+              return <a onClick={() => handleMultiLangClick(record, multiLangField)}>{originalContent}</a>;
+            },
+          };
+        }
+        return column;
+      });
+    }
+    const hasOperationColumn = newColumns.some((col: ProColumns<T>) => col.valueType === 'option');
+
+    if (hasOperationColumn) {
+      return newColumns;
+    }
+
+    return [
+      ...newColumns,
+      {
+        title: formatMessage({ id: 'cfmmUI.common.button.option', defaultMessage: '操作' }),
+        dataIndex: 'option',
+        valueType: 'option',
+        width: 186,
+        render: (_, record) => {
+          // 通用权限检查函数
+          const checkAuth = (authCode?: boolean | string | ((record: T) => boolean | undefined)) => {
+            return typeof authCode === 'function' ? authCode(record) : authCode;
+          };
+
+          // 计算各项权限
+          const viewAuth = checkAuth(defaultAuthCodes.view);
+          const editAuth = checkAuth(defaultAuthCodes.edit);
+          const removeAuth = checkAuth(defaultAuthCodes.remove);
+          const actionLogAuth = checkAuth(defaultAuthCodes.record);
+
+          return (
+            <DropdownButton
+              editAuth={editAuth}
+              removeAuth={removeAuth}
+              viewAuth={viewAuth}
+              actionLogAuth={actionLogAuth}
+              onActionLog={() => setActionLogRow(record)}
+              onView={() => setViewRow(record)}
+              onEdit={() => handleClickEdit(record)}
+              onRemove={() => handleDelete([record[rowKey]])}
+              {...(actionColumnConfig?.getDropdownButtonProps?.(record) ?? {})}
+            />
+          );
+        },
+        ...(actionColumnConfig?.columnConfig ?? {}),
+      },
+    ];
+  }, [rowKey, columns, multiLang, defaultAuthCodes, actionColumnConfig]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      actionRef,
+      updateDrawerRef,
+      tableList,
+      setTableList,
+      viewRow,
+      setViewRow,
+      actionLogRow,
+      setActionLogRow,
+      editRow,
+      setEditRow,
+      selectedRows,
+      setSelectedRows,
+      selectedRowKeys,
+      setSelectedRowKeys,
+      createModalOpen,
+      setCreateModalOpen,
+      editLangModalOpen,
+      setEditLangModalOpen,
+      currentLangInfo,
+      setCurrentLangInfo,
+      onDelete: handleDelete,
+      updateModalOpen: () => updateDrawerRef.current?.show(),
+      updateModalClose: () => updateDrawerRef.current?.close(),
+    }),
+    [
+      actionRef,
+      updateDrawerRef,
+      tableList,
+      setTableList,
+      viewRow,
+      actionLogRow,
+      editRow,
+      selectedRows,
+      selectedRowKeys,
+      createModalOpen,
+      editLangModalOpen,
+      currentLangInfo,
+      setViewRow,
+      setActionLogRow,
+      setEditRow,
+      setSelectedRows,
+      setSelectedRowKeys,
+      setCreateModalOpen,
+      setEditLangModalOpen,
+      setCurrentLangInfo,
+      handleDelete,
+    ],
+  );
+
+  const getBarButtons = useMemo<MenuProps['items'] | any[]>(() => {
+    const allButtons: MenuProps['items'] | any[] = [
+      {
+        auth: getAuthorityFn(defaultAuthCodes.add),
+        key: 'add',
+        label: (
+          <a onClick={onAdd ? onAdd : () => setCreateModalOpen(true)} key="add">
+            <PlusOutlined style={{ marginRight: 6 }} />
+            {formatMessage({ id: 'cfmmUI.common.button.add', defaultMessage: '新增' })}
+          </a>
+        ),
+      },
+      {
+        auth: getAuthorityFn(defaultAuthCodes.lang),
+        key: 'exportMultiLang',
+        label: (
+          <a onClick={handleExportMultiLang} key="exportMultiLang">
+            <CloudDownloadOutlined style={{ marginRight: 6 }} />
+            {formatMessage({ id: 'cfmmUI.common.button.exportMultiLang', defaultMessage: '导出多语言' })}
+          </a>
+        ),
+      },
+      {
+        auth: getAuthorityFn(defaultAuthCodes.lang),
+        key: 'importMultiLang',
+        label: (
+          <ImportExecl key="importMultiLang" rangeStart={{ c: 0, r: 2 }} onChange={importMultiLang}>
+            <span>
+              <UploadOutlined style={{ marginRight: 8 }} />
+              {formatMessage({ id: 'cfmmUI.common.button.importMultiLang', defaultMessage: '导入多语言' })}
+            </span>
+          </ImportExecl>
+        ),
+      },
+    ];
+
+    // 过滤有权限的按钮，并移除 auth 属性避免传递到 DOM
+    return allButtons
+      .filter((button) => button.auth)
+      .map(({ auth, ...rest }) => rest);
+  }, []);
+
+  return (
+    <>
+      <ProTable<T>
+        headerTitle={formatMessage({
+          id: `${baseLocalCode}.title`,
+          defaultMessage: '数据列表',
+        })}
+        revalidateOnFocus={false}
+        actionRef={actionRef}
+        rowKey={rowKey as string}
+        search={cfmmUtils?.getTableSearchFormLayout()}
+        scroll={cfmmUtils?.TABLE_SCROLL ?? TABLE_SCROLL}
+        toolBarRender={useMemoizedFn(() => {
+          if(!getBarButtons?.length) return [];
+          return [
+            <Dropdown.Button type="primary" loading={actionLoading} menu={{ items: getBarButtons.slice(1) }}>
+              {getBarButtons[0].icon}
+              {getBarButtons[0].label}
+            </Dropdown.Button>
+          ];
+        })}
+        request={useMemoizedFn(async (params, sorter) => {
+          const { current, pageIndex = params.current, pageSize, ...otherParams } = params;
+          const result = await handleSearch({ pageIndex, pageSize, orderBy: { ...sorter }, ...otherParams });
+          return result;
+        })}
+        columns={enhancedColumns}
+        rowSelection={useMemo(
+          () => ({
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows);
+              setSelectedRowKeys(selectedRowKeys);
+            },
+            getCheckboxProps: (record: T) => ({
+              disabled: typeof defaultAuthCodes.remove === 'function' ? !defaultAuthCodes.remove(record) : false,
+            }),
+          }),
+          [selectedRowKeys, selectedRows, defaultAuthCodes],
+        )}
+        pagination={{
+          showSizeChanger: true,
+        }}
+        {...tableProps}
+      />
+
+      {/* 批量操作工具栏 */}
+      {(defaultAuthCodes.batchRemoveAuth ||
+        (typeof defaultAuthCodes.remove !== 'function' && getAuthorityFn(defaultAuthCodes.remove))) &&
+        selectedRows?.length > 0 && (
+          <MyFooterToolbar count={selectedRows.length}>
+            <Button danger type="primary" onClick={() => handleDelete(selectedRowKeys)}>
+              {formatMessage({ id: 'cfmmUI.common.button.batchDelete', defaultMessage: '批量删除' })}
+            </Button>
+          </MyFooterToolbar>
+        )}
+
+      {/* 新增表单 */}
+      {createConfig.Component ? (
+        <createConfig.Component
+          open={createModalOpen}
+          onOpenChange={setCreateModalOpen}
+          onSubmit={useMemoizedFn(async (value) => {
+            if (actionLoading) return;
+            const success = await handleAction('POST', value);
+            if (success) {
+              setCreateModalOpen(false);
+              actionRef.current?.reload();
+            }
+            return success;
+          })}
+          loading={actionLoading}
+          {...(createConfig.props as C)}
+        />
+      ) : (
+        <CreateForm
+          title={formatMessage({
+            id: `${baseLocalCode}.create.title`,
+            defaultMessage: '新增',
+          })}
+          open={createModalOpen}
+          onOpenChange={setCreateModalOpen}
+        >
+          <ProTable<T, T>
+            loading={actionLoading}
+            onSubmit={useMemoizedFn(async (value) => {
+              if (actionLoading) return false;
+              const success = await handleAction('POST', value);
+              if (success) {
+                setCreateModalOpen(false);
+                actionRef.current?.reload();
+              }
+              return success;
+            })}
+            rowKey={rowKey as string}
+            type="form"
+            columns={columns}
+            {...(createConfig.props as C)}
+          />
+        </CreateForm>
+      )}
+
+      {/* 编辑表单 */}
+      {updateConfig.Component && (
+        <updateConfig.Component
+          updateDrawerRef={updateDrawerRef}
+          values={editRow}
+          onSubmit={useMemoizedFn(async (value) => {
+            const success = await handleAction('PUT', {
+              ...value,
+              [rowKey]: editRow?.[rowKey],
+            });
+            if (success) {
+              actionRef.current?.reload();
+              setEditRow(null);
+            }
+            return success;
+          })}
+          onCloseAfter={() => {
+            setEditRow(null);
+          }}
+          {...(updateConfig.props as U)}
+        />
+      )}
+
+      {/* 多语言编辑 */}
+      <EditMultiLangForm
+        version={version}
+        modalFormVisible={editLangModalOpen}
+        setModalFormVisible={setEditLangModalOpen}
+        values={currentLangInfo!}
+        onAfterSubmit={useMemoizedFn(() => {
+          //重新加载数据
+          actionRef.current?.reload();
+        })}
+      />
+
+      {/* 查看详情 */}
+      <ViewTableItemDrawer<T> row={viewRow} onClose={useMemoizedFn(() => setViewRow(undefined))} columns={columns} />
+
+      {/* 操作日志 */}
+      <ActionLogDrawer row={actionLogRow} onClose={useMemoizedFn(() => setActionLogRow(undefined))} />
+    </>
+  );
+}
+
+export default React.memo(forwardRef(CrudTable)) as <T, U = any, C = any>(
+  props: CrudTableConfig<T, U, C> & {
+    ref?: ForwardedRef<CrudTableRefType<T>>;
+  },
+) => JSX.Element;

package/dist/cjs/components/DicDropDownList.tpl

@@ -0,0 +1,60 @@
+import { Select, } from 'antd';
+import React, { useState, useEffect } from 'react';
+
+import { queryDictionary } from '../services';
+import { useIntl } from '@umijs/max';
+import { DicDropDownListProps, DicListItem } from "../types";
+
+const { Option } = Select;
+
+const DicDropDownList: React.FC<DicDropDownListProps> = props => {
+  const {
+    value,
+    disabled,
+    onChange,
+    dicTypes,
+    localListData,
+    showCode = true
+  } = props;
+
+  const { formatMessage } = useIntl()
+  const [dicData, setDicData] = useState<DicListItem[]>([]);
+
+  useEffect(() => {
+    if(localListData && Array.isArray(localListData)) {
+      setDicData(localListData)
+      return;
+    }
+    if(dicTypes) {
+      (async () => {
+        const { data } = await queryDictionary({ dicTypes: dicTypes });
+        if (data && data.length > 0) {
+          setDicData(data[0].list)
+        }
+      })();
+    }
+  }, [localListData]);
+
+  return (
+    <Select
+      disabled={disabled}
+      placeholder={formatMessage({ id: 'cfmmUI.common.placeholder.select', defaultMessage: '请选择' })}
+      onChange={onChange}
+      allowClear
+      value={value}
+    >
+      {
+        dicData.map(item => {
+          return <Option
+            key={item.dicId}
+            value={item.dicCode}
+          >
+            {showCode ? `${item.dicName}(${item.dicCode})` : item.dicName}
+          </Option>
+        })
+      }
+    </Select>
+  );
+};
+
+export default React.memo(DicDropDownList);