@pisell/private-materials 6.8.10 → 6.8.12

package/lib/pro/Selector/BatchSelectorDemo.js

@@ -59,12 +59,18 @@ var dataSource = [
     ruleConfig: {
       required: 1,
       autoValidate: true
+    },
+    titleProps: {
+      renderExtra: () => /* @__PURE__ */ import_react.default.createElement("div", { style: {
+        flex: 1,
+        textAlign: "right"
+      } }, "额外内容")
     }
   },
   {
     id: 4,
     title: "汉堡定制",
-    mode: "single",
+    mode: "multiple",
     valueType: "object",
     fieldNames: { value: "value", label: "title" },
     dataSource: [
@@ -72,15 +78,21 @@ var dataSource = [
         id: 1,
         title: "加倍牛肉",
         value: "double-meat",
-        ruleConfig: { min: 1, max: 3 }
+        ruleConfig: { min: 3 }
       },
       { id: 2, title: "额外芝士", value: "extra-cheese" }
     ],
-    item: {
-      variant: "card",
-      selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
+    itemProps: {
+      selectedTypeVariant: "default",
+      indicatorPosition: "right"
+    },
+    variant: "card",
+    preset: {
+      variant: "3"
     },
     ruleConfig: {
+      min: 5,
+      max: 9,
       required: 1,
       autoValidate: true
     }
@@ -116,10 +128,9 @@ var dataSource = [
       columns: 3,
       gutter: 16
     },
-    item: {
-      variant: "card",
+    variant: "card",
+    itemProps: {
       layout: "vertical",
-      selectedTypeVariant: "cornered",
       renderContent: (dataSource2) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
         "img",
         {
@@ -151,9 +162,9 @@ var dataSource = [
       },
       { id: 2, title: "额外芝士", value: "extra-cheese" }
     ],
-    item: {
-      variant: "card",
-      selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
+    variant: "card",
+    indicatorProps: {
+      render: () => /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
     }
   },
   {
@@ -171,10 +182,7 @@ var dataSource = [
       },
       { id: 2, title: "额外芝士", value: "extra-cheese" }
     ],
-    item: {
-      variant: "card",
-      selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
-    }
+    variant: "card"
   },
   {
     id: 33,
@@ -191,10 +199,7 @@ var dataSource = [
       },
       { id: 2, title: "额外芝士", value: "extra-cheese" }
     ],
-    item: {
-      variant: "card",
-      selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
-    }
+    variant: "card"
   },
   {
     id: 34,
@@ -211,10 +216,7 @@ var dataSource = [
       },
       { id: 2, title: "额外芝士", value: "extra-cheese" }
     ],
-    item: {
-      variant: "card",
-      selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
-    }
+    variant: "card"
   }
 ];
 var linkageRules = [
@@ -238,136 +240,446 @@ var linkageRules = [
 var BatchSelectorDemo = () => {
   const [values1, setValues1] = (0, import_react.useState)({});
   const [values2, setValues2] = (0, import_react.useState)({});
+  const [values3, setValues3] = (0, import_react.useState)({});
+  const [values4, setValues4] = (0, import_react.useState)({});
   const ref = (0, import_react.useRef)(null);
+  const ref2 = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "0", maxWidth: "900px", margin: "0 auto", height: "100vh", overflow: "auto" }, ref: containerRef }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2 }, "嵌套条件 + 分支控制（elseThen/stopAfterApply）演示"), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Alert,
-    {
-      message: "说明",
-      description: "当选择汉堡且不为多糖时显示“汉堡定制”（短路）；未命中时显示“默认定制”（不短路，可继续评估后续规则）；当选择披萨且满足（温度为热/烫 或 糖度为少糖）时显示“披萨定制”。未命中时，定制分组默认隐藏。",
-      type: "info",
-      showIcon: true,
-      style: { marginBottom: 16 }
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector" }, /* @__PURE__ */ import_react.default.createElement(
-    import_SelectorGroup.default,
-    {
-      dataSource,
-      linkageRules,
-      allowedValuesPolicy: "strict",
-      value: values1,
-      onChange: (v) => setValues1({ ...v || {} }),
-      customScrollParent: containerRef.current
-    }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Alert,
-    {
-      message: "实时值",
-      description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values1, null, 2)),
-      type: "success",
-      showIcon: true
-    }
-  ))), /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "联动演示：选项影响另一个分组的可选项"), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Alert,
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      message: "说明",
-      description: "当选择饮品为 Coffee 时，加料仅允许 Milk/Sugar；选择 Tea 时，加料仅允许 Lemon/Honey。未允许的选项会在 UI 中禁用（soft 模式演示）。",
-      type: "info",
-      showIcon: true,
-      style: { marginBottom: 16 }
-    }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "1000px" } }), (() => {
-    const dataSource2 = [
-      {
-        id: 11,
-        title: "饮品",
-        mode: "single",
-        valueType: "primitive",
-        fieldNames: { value: "value", label: "title" },
-        dataSource: [
-          { id: 1, title: "Coffee", value: "coffee" },
-          { id: 2, title: "Tea", value: "tea" }
-        ]
-      },
-      {
-        id: 12,
-        title: "加料",
-        mode: "single",
-        valueType: "primitive",
-        fieldNames: { value: "value", label: "title" },
-        dataSource: [
-          { id: 1, title: "Milk", value: "milk" },
-          { id: 2, title: "Sugar", value: "sugar" },
-          { id: 3, title: "Lemon", value: "lemon" },
-          { id: 4, title: "Honey", value: "honey" }
-        ],
-        item: {
-          variant: "card"
-        },
-        titleProps: {
-          tip: {
-            visible: true,
-            text: "加料"
-          }
-        }
-      }
-    ];
-    const linkageRules2 = [
-      // 当选择 Coffee 时，仅允许 milk/sugar；未选择或选择 Tea 时不受这条规则影响
-      {
-        type: "expr",
-        when: { and: [{ groupId: "11", op: "eq", value: "coffee" }] },
-        then: [
-          {
-            type: "allowOnly",
-            groupId: "12",
-            values: ["milk", "sugar"],
-            message: "请选择 Milk 或 Sugar",
-            tip: "加料仅允许 Milk/Sugar"
-          }
-        ],
-        priority: 30
+      style: {
+        padding: "0",
+        margin: "0 auto",
+        height: "100vh",
+        overflow: "auto"
       },
-      // 当选择 Tea 时，仅允许 lemon/honey；未选择或选择 Coffee 时不受这条规则影响
+      ref: containerRef
+    },
+    /* @__PURE__ */ import_react.default.createElement(Title, { level: 2 }, "嵌套条件 + 分支控制（elseThen/stopAfterApply）演示"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Alert,
       {
-        type: "expr",
-        when: { and: [{ groupId: "11", op: "eq", value: "tea" }] },
-        then: [
-          {
-            type: "allowOnly",
-            groupId: "12",
-            values: ["lemon", "honey"],
-            message: "请选择 Lemon 或 Honey",
-            tip: "加料仅允许 Lemon/Honey"
-          }
-        ],
-        priority: 30
+        message: "说明",
+        description: "当选择汉堡且不为多糖时显示“汉堡定制”（短路）；未命中时显示“默认定制”（不短路，可继续评估后续规则）；当选择披萨且满足（温度为热/烫 或 糖度为少糖）时显示“披萨定制”。未命中时，定制分组默认隐藏。",
+        type: "info",
+        showIcon: true,
+        style: { marginBottom: 16 }
       }
-    ];
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（选项联动示例）" }, /* @__PURE__ */ import_react.default.createElement(
+    ),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector" }, /* @__PURE__ */ import_react.default.createElement(
       import_SelectorGroup.default,
       {
-        ref,
-        dataSource: dataSource2,
-        linkageRules: linkageRules2,
-        allowedValuesPolicy: "relaxed",
-        value: values2,
-        onChange: (v) => setValues2({ ...v || {} }),
+        dataSource,
+        linkageRules,
+        allowedValuesPolicy: "strict",
+        value: values1,
+        onChange: (v) => setValues1({ ...v || {} }),
         customScrollParent: containerRef.current
       }
-    ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
-      var _a;
-      return (_a = ref.current) == null ? void 0 : _a.validate();
-    } }, "validate")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Alert,
       {
         message: "实时值",
-        description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values2, null, 2)),
+        description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values1, null, 2)),
         type: "success",
         showIcon: true
       }
-    )));
-  })());
+    ))),
+    /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "联动演示：选项影响另一个分组的可选项"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Alert,
+      {
+        message: "说明",
+        description: "当选择饮品为 Coffee 时，加料仅允许 Milk/Sugar；选择 Tea 时，加料仅允许 Lemon/Honey。未允许的选项会在 UI 中禁用（soft 模式演示）。",
+        type: "info",
+        showIcon: true,
+        style: { marginBottom: 16 }
+      }
+    ),
+    (() => {
+      const dataSource2 = [
+        {
+          id: 11,
+          title: "饮品",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "Coffee", value: "coffee" },
+            { id: 2, title: "Tea", value: "tea" }
+          ],
+          titleProps: {
+            visible: true,
+            title: {
+              visible: true,
+              text: "选择饮品"
+            },
+            icon: {
+              visible: true,
+              icon: /* @__PURE__ */ import_react.default.createElement(import_icons.InfoCircleOutlined, null)
+            }
+          }
+        },
+        {
+          id: 12,
+          title: "加料",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "Milk", value: "milk" },
+            { id: 2, title: "Sugar", value: "sugar" },
+            { id: 3, title: "Lemon", value: "lemon" },
+            { id: 4, title: "Honey", value: "honey" }
+          ],
+          variant: "card",
+          titleProps: {
+            visible: true,
+            tip: {
+              visible: true,
+              text: "根据饮品选择加料"
+            }
+          }
+        }
+      ];
+      const linkageRules2 = [
+        // 当选择 Coffee 时，仅允许 milk/sugar；未选择或选择 Tea 时不受这条规则影响
+        {
+          type: "expr",
+          when: { and: [{ groupId: "11", op: "eq", value: "coffee" }] },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "12",
+              values: ["milk", "sugar"],
+              message: "请选择 Milk 或 Sugar",
+              tip: "加料仅允许 Milk/Sugar"
+            }
+          ],
+          priority: 30
+        },
+        // 当选择 Tea 时，仅允许 lemon/honey；未选择或选择 Coffee 时不受这条规则影响
+        {
+          type: "expr",
+          when: { and: [{ groupId: "11", op: "eq", value: "tea" }] },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "12",
+              values: ["lemon", "honey"],
+              message: "请选择 Lemon 或 Honey",
+              tip: "加料仅允许 Lemon/Honey"
+            }
+          ],
+          priority: 30
+        }
+      ];
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "联动演示：选项影响另一个分组的可选项"), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "说明",
+          description: "当选择饮品为 Coffee 时，加料仅允许 Milk/Sugar；选择 Tea 时，加料仅允许 Lemon/Honey。未允许的选项会在 UI 中禁用（relaxed 模式演示）。",
+          type: "info",
+          showIcon: true,
+          style: { marginBottom: 16 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（选项联动示例）" }, /* @__PURE__ */ import_react.default.createElement(
+        import_SelectorGroup.default,
+        {
+          ref,
+          dataSource: dataSource2,
+          linkageRules: linkageRules2,
+          allowedValuesPolicy: "relaxed",
+          value: values2,
+          onChange: (v) => setValues2({ ...v || {} }),
+          customScrollParent: containerRef.current
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+        var _a;
+        return (_a = ref.current) == null ? void 0 : _a.validate();
+      } }, "validate")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "实时值",
+          description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values2, null, 2)),
+          type: "success",
+          showIcon: true
+        }
+      ))));
+    })(),
+    (() => {
+      const dataSource3 = [
+        {
+          id: 21,
+          title: "基础套餐",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "标准套餐", value: "standard" },
+            { id: 2, title: "豪华套餐", value: "deluxe" }
+          ],
+          ruleConfig: {
+            required: 1,
+            autoValidate: true
+          },
+          preserve: true
+        },
+        {
+          id: 22,
+          title: "附加服务",
+          mode: "multiple",
+          valueType: "object",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            {
+              id: 1,
+              title: "快递配送",
+              value: "delivery",
+              ruleConfig: { min: 1, max: 5 }
+            },
+            {
+              id: 2,
+              title: "礼品包装",
+              value: "gift-wrap",
+              ruleConfig: { min: 1, max: 3 }
+            },
+            {
+              id: 3,
+              title: "延长保修",
+              value: "warranty"
+            }
+          ],
+          variant: "card",
+          itemProps: {
+            layout: "vertical"
+          },
+          preserve: false
+        },
+        {
+          id: 23,
+          title: "支付方式",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "支付宝", value: "alipay" },
+            { id: 2, title: "微信支付", value: "wechat" },
+            { id: 3, title: "银行卡", value: "card" }
+          ],
+          ruleConfig: {
+            required: 1
+          }
+        }
+      ];
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "Preserve 和 TabProps 演示"), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "说明",
+          description: "preserve 属性控制分组隐藏时是否保留值。基础套餐和支付方式设置 preserve=true，附加服务设置 preserve=false。tabProps 控制标签页显示。",
+          type: "info",
+          showIcon: true,
+          style: { marginBottom: 16 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（Preserve 示例）" }, /* @__PURE__ */ import_react.default.createElement(
+        import_SelectorGroup.default,
+        {
+          dataSource: dataSource3,
+          value: values3,
+          onChange: (v) => setValues3({ ...v || {} }),
+          preserve: true,
+          tabProps: {
+            visible: true
+          },
+          customScrollParent: containerRef.current
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "实时值",
+          description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values3, null, 2)),
+          type: "success",
+          showIcon: true
+        }
+      ))));
+    })(),
+    (() => {
+      const dataSource4 = [
+        {
+          id: 31,
+          title: "房间类型",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "单人间", value: "single" },
+            { id: 2, title: "双人间", value: "double" },
+            { id: 3, title: "豪华套房", value: "suite" }
+          ],
+          variant: "card",
+          itemProps: {
+            layout: "horizontal",
+            selectedTypeVariant: "bordered"
+          },
+          ruleConfig: {
+            required: 1,
+            autoValidate: true
+          }
+        },
+        {
+          id: 32,
+          title: "床型偏好（单人间）",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "标准单人床", value: "single-bed" },
+            { id: 2, title: "加大单人床", value: "king-single" }
+          ]
+        },
+        {
+          id: 33,
+          title: "床型偏好（双人间）",
+          mode: "single",
+          valueType: "primitive",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            { id: 1, title: "双床", value: "twin" },
+            { id: 2, title: "大床", value: "queen" },
+            { id: 3, title: "特大床", value: "king" }
+          ]
+        },
+        {
+          id: 34,
+          title: "额外需求",
+          mode: "multiple",
+          valueType: "object",
+          fieldNames: { value: "value", label: "title" },
+          dataSource: [
+            {
+              id: 1,
+              title: "早餐",
+              value: "breakfast",
+              ruleConfig: { min: 0, max: 10 }
+            },
+            {
+              id: 2,
+              title: "接机服务",
+              value: "pickup"
+            },
+            {
+              id: 3,
+              title: "免费升级",
+              value: "upgrade"
+            }
+          ],
+          variant: "card",
+          itemProps: {
+            layout: "vertical"
+          },
+          ruleConfig: {
+            max: 8,
+            min: 2,
+            autoValidate: true
+          }
+        }
+      ];
+      const linkageRules4 = [
+        // 单人间显示单人床型
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "single" }] },
+          then: [
+            { type: "show", groupId: "32" },
+            { type: "hide", groupId: "33" }
+          ],
+          stopAfterApply: false
+        },
+        // 双人间显示双人床型
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "double" }] },
+          then: [
+            { type: "show", groupId: "33" },
+            { type: "hide", groupId: "32" }
+          ],
+          stopAfterApply: false
+        },
+        // 豪华套房隐藏床型选择
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "suite" }] },
+          then: [
+            { type: "hide", groupId: "32" },
+            { type: "hide", groupId: "33" }
+          ],
+          stopAfterApply: false
+        },
+        // 豪华套房时，额外需求中允许免费升级
+        {
+          type: "expr",
+          when: { and: [{ groupId: "31", op: "eq", value: "suite" }] },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "34",
+              values: ["breakfast", "pickup", "upgrade"]
+            }
+          ]
+        },
+        // 非豪华套房时，不允许免费升级
+        {
+          type: "expr",
+          when: {
+            and: [
+              { groupId: "31", op: "in", value: ["single", "double"] }
+            ]
+          },
+          then: [
+            {
+              type: "allowOnly",
+              groupId: "34",
+              values: ["breakfast", "pickup"],
+              message: "该房型不支持免费升级"
+            }
+          ]
+        }
+      ];
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, { level: 2, style: { marginTop: 32 } }, "复杂联动规则演示"), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "说明",
+          description: "根据房间类型显示不同的床型选项，豪华套房可以免费升级，其他房型不允许。演示多条规则的组合使用。",
+          type: "info",
+          showIcon: true,
+          style: { marginBottom: 16 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { title: "BatchSelector（复杂规则组合）" }, /* @__PURE__ */ import_react.default.createElement(
+        import_SelectorGroup.default,
+        {
+          ref: ref2,
+          dataSource: dataSource4,
+          linkageRules: linkageRules4,
+          allowedValuesPolicy: "strict",
+          value: values4,
+          onChange: (v) => setValues4({ ...v || {} }),
+          customScrollParent: containerRef.current
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+        var _a;
+        return (_a = ref2.current) == null ? void 0 : _a.validate();
+      } }, "手动校验"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => setValues4({}) }, "重置")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Alert,
+        {
+          message: "实时值",
+          description: /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, JSON.stringify(values4, null, 2)),
+          type: "success",
+          showIcon: true
+        }
+      ))));
+    })()
+  );
 };
 var BatchSelectorDemo_default = BatchSelectorDemo;
 // Annotate the CommonJS export names for ESM import in node: