crud-page-react 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -150,7 +150,12 @@ interface ActionSchema {
     danger?: boolean;
     color?: string;
     permission?: ActionPermission;
-    condition?: Record<string, unknown>;
+    /**
+     * 操作按钮显示条件
+     * 支持字段值匹配：{ status: ['active', 'pending'] }
+     * 支持嵌套字段：{ 'user.role': ['admin'] }
+     */
+    condition?: ActionCondition;
     confirm?: {
         title: string;
         content?: string;
@@ -209,6 +214,15 @@ declare function getNestedValue(obj: Record<string, unknown>, path: string): unk
  * 'name'                  → null
  */
 declare function getFieldGroupPrefix(key: string): string | null;
+/**
+ * 操作按钮显示条件配置
+ * 支持两种格式：
+ * 1. 字段值匹配：{ fieldName: [value1, value2] } - 当字段值在数组中时显示
+ * 2. 自定义表达式：{ expression: "record.status === 'active'" } - 使用表达式判断
+ */
+interface ActionCondition {
+    [fieldName: string]: (string | number | boolean)[];
+}
 
 interface CrudPageProps {
     schema: CrudPageSchema;

package/dist/index.esm.js

@@ -66,6 +66,35 @@ function getFieldGroupPrefix(key) {
     const idx = key.indexOf('.');
     return idx >= 0 ? key.slice(0, idx) : null;
 }
+/**
+ * 检查操作按钮是否应该显示
+ *
+ * @param condition - 条件配置
+ * @param record - 当前行数据
+ * @returns 是否应该显示该操作
+ *
+ * @example
+ * // 字段值匹配
+ * shouldShowAction({ status: ['active', 'pending'] }, { status: 'active' }) → true
+ * shouldShowAction({ status: ['active', 'pending'] }, { status: 'deleted' }) → false
+ *
+ * // 支持嵌套字段（点分路径）
+ * shouldShowAction({ 'user.role': ['admin'] }, { user: { role: 'admin' } }) → true
+ */
+function shouldShowAction(condition, record) {
+    if (!condition || Object.keys(condition).length === 0) {
+        return true; // 没有条件时默认显示
+    }
+    for (const [fieldPath, allowedValues] of Object.entries(condition)) {
+        // 支持点分路径获取嵌套值
+        const actualValue = getNestedValue(record, fieldPath);
+        // 检查值是否在允许的值列表中
+        if (!allowedValues.includes(actualValue)) {
+            return false;
+        }
+    }
+    return true;
+}
 
 const { RangePicker } = DatePicker;
 /** 解析 FilterConfig */
@@ -253,9 +282,21 @@ function DynamicTable({ schema, data, loading, pagination, onView, onEdit, onDel
         render: (_, record) => {
             var _a;
             const actions = (_a = schema.actions) !== null && _a !== void 0 ? _a : [];
-            // 分离基础操作和自定义操作
-            const basicActions = actions.filter(action => action.type === 'view' || action.type === 'edit' || action.type === 'delete');
-            const customActions = actions.filter(action => action.type === 'custom');
+            // 分离基础操作和自定义操作，并根据 condition 过滤
+            const basicActions = actions.filter(action => {
+                // 检查是否是基础操作类型
+                const isBasicAction = action.type === 'view' || action.type === 'edit' || action.type === 'delete';
+                if (!isBasicAction)
+                    return false;
+                // 检查 condition 条件
+                return shouldShowAction(action.condition, record);
+            });
+            const customActions = actions.filter(action => {
+                if (action.type !== 'custom')
+                    return false;
+                // 检查 condition 条件
+                return shouldShowAction(action.condition, record);
+            });
             // 构建下拉菜单项（仅包含自定义操作）
             const dropdownItems = customActions.map(action => ({
                 key: action.key,