@dtjoy/dt-design 1.1.2 → 1.1.5

package/es/table/features/editable/BatchEditModal.js

@@ -0,0 +1,786 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import * as React from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Alert, Button, Input, InputNumber, Modal, Radio, Select, Space } from 'antd';
+import { applyBatchRules, getBatchEditableColumns, isSequenceSupported, typeLabelMap } from "./batchEditUtils";
+import useBatchRules from "./useBatchRules";
+
+// ============================================================
+// 辅助函数
+// ============================================================
+
+/** 叶子列类型 */
+
+/** Select 选项类型 */
+
+var buildFieldOptions = function buildFieldOptions(columns) {
+  return columns.map(function (c) {
+    var _c$dataIndex, _c$dataIndex2;
+    return {
+      label: typeof c.title === 'string' ? c.title : String((_c$dataIndex = c.dataIndex) !== null && _c$dataIndex !== void 0 ? _c$dataIndex : c.key),
+      value: String((_c$dataIndex2 = c.dataIndex) !== null && _c$dataIndex2 !== void 0 ? _c$dataIndex2 : c.key)
+    };
+  });
+};
+var buildTypeOptions = function buildTypeOptions(fieldKey, columns) {
+  var options = [{
+    label: '固定值填充',
+    value: 'value'
+  }, {
+    label: '查找替换',
+    value: 'replace'
+  }];
+  if (isSequenceSupported(columns, fieldKey)) {
+    options.push({
+      label: '序列生成',
+      value: 'sequence'
+    });
+  }
+  return options;
+};
+var getColumnByFieldKey = function getColumnByFieldKey(columns, fieldKey) {
+  return columns.find(function (c) {
+    var _c$dataIndex3;
+    return String((_c$dataIndex3 = c.dataIndex) !== null && _c$dataIndex3 !== void 0 ? _c$dataIndex3 : c.key) === fieldKey;
+  });
+};
+var getEditorType = function getEditorType(columns, fieldKey) {
+  var _ed$type;
+  var col = getColumnByFieldKey(columns, fieldKey);
+  if (!col) return 'input';
+  var ed = col.editable;
+  if (ed && _typeof(ed) === 'object') return (_ed$type = ed.type) !== null && _ed$type !== void 0 ? _ed$type : 'input';
+  return 'input';
+};
+var getFieldOptions = function getFieldOptions(columns, fieldKey) {
+  var col = getColumnByFieldKey(columns, fieldKey);
+  if (!col) return [];
+  var ed = col.editable;
+  if (ed && _typeof(ed) === 'object') return ed.options || [];
+  return [];
+};
+
+// ============================================================
+// 规则表单子组件
+// ============================================================
+
+var ValueRuleForm = function ValueRuleForm(_ref) {
+  var rule = _ref.rule,
+    columns = _ref.columns,
+    onUpdate = _ref.onUpdate;
+  var editorType = getEditorType(columns, rule.fieldKey);
+  var fieldOpts = getFieldOptions(columns, rule.fieldKey);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 12,
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "value-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u586B\u5145\u503C"), editorType === 'select' ? /*#__PURE__*/React.createElement(Select, {
+    id: "value-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    value: rule.value,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        value: v
+      });
+    },
+    options: fieldOpts,
+    placeholder: "\u9009\u62E9\u586B\u5145\u503C",
+    allowClear: true
+  }) : editorType === 'number' ? /*#__PURE__*/React.createElement(InputNumber, {
+    id: "value-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    value: rule.value,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        value: v !== null && v !== void 0 ? v : undefined
+      });
+    },
+    placeholder: "\u8F93\u5165\u586B\u5145\u503C"
+  }) : /*#__PURE__*/React.createElement(Input, {
+    id: "value-".concat(rule.id),
+    value: rule.value,
+    onChange: function onChange(e) {
+      return onUpdate(rule.id, {
+        value: e.target.value
+      });
+    },
+    placeholder: "\u8F93\u5165\u586B\u5145\u503C"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 200
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "mode-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u586B\u5145\u65B9\u5F0F"), /*#__PURE__*/React.createElement(Radio.Group, {
+    id: "mode-".concat(rule.id),
+    value: rule.mode,
+    onChange: function onChange(e) {
+      return onUpdate(rule.id, {
+        mode: e.target.value
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "overwrite"
+  }, "\u8986\u76D6"), /*#__PURE__*/React.createElement(Radio, {
+    value: "fillEmpty"
+  }, "\u4EC5\u586B\u7A7A"))));
+};
+var ReplaceRuleForm = function ReplaceRuleForm(_ref2) {
+  var rule = _ref2.rule,
+    columns = _ref2.columns,
+    data = _ref2.data,
+    selectedRowKeys = _ref2.selectedRowKeys,
+    getRowKey = _ref2.getRowKey,
+    onUpdate = _ref2.onUpdate;
+  var editorType = getEditorType(columns, rule.fieldKey);
+  var fieldOpts = getFieldOptions(columns, rule.fieldKey);
+  var isSelect = editorType === 'select';
+  var distinctValues = React.useMemo(function () {
+    var keySet = new Set(selectedRowKeys);
+    var set = new Set();
+    data.forEach(function (row, i) {
+      if (!keySet.has(getRowKey(row, i))) return;
+      var v = row[rule.fieldKey];
+      if (v === undefined || v === null) {
+        set.add('');
+      } else if (Array.isArray(v)) {
+        v.forEach(function (item) {
+          return set.add(item);
+        });
+      } else {
+        set.add(v);
+      }
+    });
+    return Array.from(set).slice(0, 50);
+  }, [data, selectedRowKeys, rule.fieldKey, getRowKey]);
+  var oldValueOptions = distinctValues.map(function (v) {
+    return {
+      label: v === '' ? '（空）' : String(v),
+      value: v
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isSelect && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "match-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u5339\u914D\u65B9\u5F0F"), /*#__PURE__*/React.createElement(Radio.Group, {
+    id: "match-".concat(rule.id),
+    value: rule.matchMode,
+    onChange: function onChange(e) {
+      return onUpdate(rule.id, {
+        matchMode: e.target.value
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "exact"
+  }, "\u7CBE\u786E\u5339\u914D"), /*#__PURE__*/React.createElement(Radio, {
+    value: "contains"
+  }, "\u5305\u542B\u5339\u914D"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 12,
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "old-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u67E5\u627E\u5185\u5BB9"), /*#__PURE__*/React.createElement(Select, {
+    id: "old-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    showSearch: true,
+    value: rule.oldValue,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        oldValue: v
+      });
+    },
+    options: oldValueOptions,
+    placeholder: "\u9009\u62E9\u67E5\u627E\u503C",
+    allowClear: true
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u66FF\u6362\u4E3A"), isSelect ? /*#__PURE__*/React.createElement(Select, {
+    id: "new-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    value: rule.newValue,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        newValue: v
+      });
+    },
+    options: fieldOpts,
+    placeholder: "\u9009\u62E9\u66FF\u6362\u503C",
+    allowClear: true
+  }) : editorType === 'number' ? /*#__PURE__*/React.createElement(InputNumber, {
+    id: "new-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    value: rule.newValue,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        newValue: v !== null && v !== void 0 ? v : undefined
+      });
+    },
+    placeholder: "\u66FF\u6362\u4E3A"
+  }) : /*#__PURE__*/React.createElement(Input, {
+    id: "new-".concat(rule.id),
+    value: rule.newValue,
+    onChange: function onChange(e) {
+      return onUpdate(rule.id, {
+        newValue: e.target.value
+      });
+    },
+    placeholder: "\u66FF\u6362\u4E3A"
+  }))));
+};
+var SequenceRuleForm = function SequenceRuleForm(_ref3) {
+  var rule = _ref3.rule,
+    columns = _ref3.columns,
+    onUpdate = _ref3.onUpdate;
+  var editorType = getEditorType(columns, rule.fieldKey);
+  var isNumberField = editorType === 'number';
+  var seqPreview = React.useMemo(function () {
+    var samples = [];
+    for (var i = 0; i < 3; i++) {
+      var num = rule.start + i * rule.step;
+      var numStr = rule.digitWidth ? String(num).padStart(rule.digitWidth, '0') : String(num);
+      samples.push(isNumberField ? numStr : "".concat(rule.prefix).concat(numStr));
+    }
+    return samples.join('、');
+  }, [rule, isNumberField]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 12,
+      marginBottom: 8,
+      flexWrap: 'wrap'
+    }
+  }, !isNumberField && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: '1 1 120px',
+      minWidth: 120
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "prefix-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u524D\u7F00"), /*#__PURE__*/React.createElement(Input, {
+    id: "prefix-".concat(rule.id),
+    placeholder: "\u5982 ELE_",
+    value: rule.prefix,
+    onChange: function onChange(e) {
+      return onUpdate(rule.id, {
+        prefix: e.target.value
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: '1 1 100px',
+      minWidth: 100
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "start-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u8D77\u59CB\u503C"), /*#__PURE__*/React.createElement(InputNumber, {
+    id: "start-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    min: 0,
+    value: rule.start,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        start: v !== null && v !== void 0 ? v : 0
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: '1 1 100px',
+      minWidth: 100
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "step-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u6B65\u957F"), /*#__PURE__*/React.createElement(InputNumber, {
+    id: "step-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    min: 1,
+    value: rule.step,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        step: v !== null && v !== void 0 ? v : 1
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: '1 1 100px',
+      minWidth: 100
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "digit-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u4F4D\u6570\u8865\u96F6"), /*#__PURE__*/React.createElement(InputNumber, {
+    id: "digit-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    min: 1,
+    placeholder: "\u4E0D\u8865\u96F6",
+    value: rule.digitWidth,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        digitWidth: v !== null && v !== void 0 ? v : undefined
+      });
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '6px 10px',
+      background: '#f6f8fa',
+      borderRadius: 4,
+      fontSize: 12,
+      color: '#595959'
+    }
+  }, "\u9884\u89C8\uFF1A", seqPreview));
+};
+
+// ============================================================
+// 规则编辑器
+// ============================================================
+
+var RuleEditor = function RuleEditor(_ref4) {
+  var rule = _ref4.rule,
+    idx = _ref4.idx,
+    columns = _ref4.columns,
+    data = _ref4.data,
+    selectedRowKeys = _ref4.selectedRowKeys,
+    getRowKey = _ref4.getRowKey,
+    totalRules = _ref4.totalRules,
+    onMove = _ref4.onMove,
+    onUpdate = _ref4.onUpdate,
+    onRemove = _ref4.onRemove;
+  var fieldOptions = buildFieldOptions(columns);
+  var typeOptions = buildTypeOptions(rule.fieldKey, columns);
+  var renderBody = function renderBody() {
+    if (rule.type === 'value') {
+      return /*#__PURE__*/React.createElement(ValueRuleForm, {
+        rule: rule,
+        columns: columns,
+        onUpdate: onUpdate
+      });
+    }
+    if (rule.type === 'replace') {
+      return /*#__PURE__*/React.createElement(ReplaceRuleForm, {
+        rule: rule,
+        columns: columns,
+        data: data,
+        selectedRowKeys: selectedRowKeys,
+        getRowKey: getRowKey,
+        onUpdate: onUpdate
+      });
+    }
+    return /*#__PURE__*/React.createElement(SequenceRuleForm, {
+      rule: rule,
+      columns: columns,
+      onUpdate: onUpdate
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px solid #f0f0f0',
+      borderRadius: 6,
+      padding: 12,
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 22,
+      height: 22,
+      borderRadius: '50%',
+      background: '#1890ff',
+      color: '#fff',
+      fontSize: 12,
+      fontWeight: 600
+    }
+  }, idx + 1), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 500
+    }
+  }, typeLabelMap[rule.type])), /*#__PURE__*/React.createElement(Space, {
+    size: 4
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    size: "small",
+    disabled: idx === 0,
+    onClick: function onClick() {
+      return onMove(rule.id, 'up');
+    }
+  }, "\u4E0A\u79FB"), /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    size: "small",
+    disabled: idx === totalRules - 1,
+    onClick: function onClick() {
+      return onMove(rule.id, 'down');
+    }
+  }, "\u4E0B\u79FB"), totalRules > 1 && /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    danger: true,
+    size: "small",
+    onClick: function onClick() {
+      return onRemove(rule.id);
+    }
+  }, "\u5220\u9664"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 12,
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "field-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u76EE\u6807\u5B57\u6BB5"), /*#__PURE__*/React.createElement(Select, {
+    id: "field-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    value: rule.fieldKey,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        fieldKey: v
+      });
+    },
+    options: fieldOptions
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "type-".concat(rule.id),
+    style: {
+      display: 'block',
+      fontSize: 12,
+      color: '#8c8c8c',
+      marginBottom: 4
+    }
+  }, "\u89C4\u5219\u7C7B\u578B"), /*#__PURE__*/React.createElement(Select, {
+    id: "type-".concat(rule.id),
+    style: {
+      width: '100%'
+    },
+    value: rule.type,
+    onChange: function onChange(v) {
+      return onUpdate(rule.id, {
+        type: v
+      });
+    },
+    options: typeOptions
+  }))), renderBody());
+};
+
+// ============================================================
+// 主组件
+// ============================================================
+
+var BatchEditModal = function BatchEditModal(_ref5) {
+  var open = _ref5.open,
+    columns = _ref5.columns,
+    selectedRowKeys = _ref5.selectedRowKeys,
+    data = _ref5.data,
+    getRowKey = _ref5.getRowKey,
+    onCancel = _ref5.onCancel,
+    onApply = _ref5.onApply;
+  var availableColumns = React.useMemo(function () {
+    return getBatchEditableColumns(columns);
+  }, [columns]);
+  var _useBatchRules = useBatchRules(open, availableColumns),
+    rules = _useBatchRules.rules,
+    moveRule = _useBatchRules.moveRule,
+    updateRule = _useBatchRules.updateRule,
+    removeRule = _useBatchRules.removeRule,
+    addRule = _useBatchRules.addRule;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    previewData = _React$useState2[0],
+    setPreviewData = _React$useState2[1];
+  React.useEffect(function () {
+    if (open) {
+      setPreviewData(null);
+    }
+  }, [open]);
+  var selectedCount = selectedRowKeys.length;
+  var handleApply = function handleApply() {
+    var newData = applyBatchRules(data, selectedRowKeys, getRowKey, columns, rules);
+    onApply(newData);
+  };
+  var handlePreview = function handlePreview() {
+    var newData = applyBatchRules(data, selectedRowKeys, getRowKey, columns, rules);
+    setPreviewData(newData);
+  };
+  var previewRows = React.useMemo(function () {
+    if (!previewData) return [];
+    var keySet = new Set(selectedRowKeys);
+    return data.map(function (row, i) {
+      return {
+        row: row,
+        index: i,
+        key: getRowKey(row, i)
+      };
+    }).filter(function (item) {
+      return keySet.has(item.key);
+    }).slice(0, 10).map(function (item) {
+      return {
+        index: item.index,
+        before: item.row,
+        after: previewData[item.index]
+      };
+    });
+  }, [previewData, data, selectedRowKeys, getRowKey]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+    title: "\u6279\u91CF\u7F16\u8F91",
+    open: open,
+    onCancel: onCancel,
+    width: 720,
+    destroyOnClose: true,
+    zIndex: 1000,
+    footer: [/*#__PURE__*/React.createElement(Button, {
+      key: "cancel",
+      onClick: onCancel
+    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+      key: "preview",
+      onClick: handlePreview,
+      disabled: rules.length === 0 || selectedCount === 0
+    }, "\u6548\u679C\u9884\u89C8"), /*#__PURE__*/React.createElement(Button, {
+      key: "ok",
+      type: "primary",
+      onClick: handleApply,
+      disabled: rules.length === 0 || selectedCount === 0
+    }, "\u786E\u8BA4\u5E94\u7528")]
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 12,
+      padding: '8px 12px',
+      background: '#e6f7ff',
+      borderRadius: 4,
+      fontSize: 13
+    }
+  }, "\u5DF2\u9009\u62E9 ", /*#__PURE__*/React.createElement("strong", null, selectedCount), " \u884C\u6570\u636E\uFF0C\u5171\u8BBE\u7F6E ", /*#__PURE__*/React.createElement("strong", null, rules.length), ' ', "\u6761\u89C4\u5219\u3002 \u89C4\u5219\u6309\u4ECE\u4E0A\u5230\u4E0B\u7684\u987A\u5E8F\u4F9D\u6B21\u6267\u884C\u3002"), /*#__PURE__*/React.createElement("div", null, availableColumns.length === 0 && /*#__PURE__*/React.createElement(Alert, {
+    message: "\u6CA1\u6709\u53EF\u6279\u91CF\u7F16\u8F91\u7684\u5B57\u6BB5",
+    type: "info",
+    showIcon: true
+  }), rules.map(function (rule, idx) {
+    return /*#__PURE__*/React.createElement(RuleEditor, {
+      key: rule.id,
+      rule: rule,
+      idx: idx,
+      columns: availableColumns,
+      data: data,
+      selectedRowKeys: selectedRowKeys,
+      getRowKey: getRowKey,
+      totalRules: rules.length,
+      onMove: moveRule,
+      onUpdate: updateRule,
+      onRemove: removeRule
+    });
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "dashed",
+    block: true,
+    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+    disabled: availableColumns.length === 0,
+    onClick: addRule,
+    style: {
+      marginTop: 4
+    }
+  }, "\u6DFB\u52A0\u89C4\u5219"))), /*#__PURE__*/React.createElement(Modal, {
+    title: "\u6279\u91CF\u7F16\u8F91\u6548\u679C\u9884\u89C8",
+    open: !!previewData,
+    onCancel: function onCancel() {
+      return setPreviewData(null);
+    },
+    onOk: function onOk() {
+      return setPreviewData(null);
+    },
+    width: 640,
+    zIndex: 1100,
+    footer: [/*#__PURE__*/React.createElement(Button, {
+      key: "close",
+      onClick: function onClick() {
+        return setPreviewData(null);
+      }
+    }, "\u5173\u95ED")]
+  }, previewRows.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxHeight: 400,
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: '100%',
+      borderCollapse: 'collapse',
+      fontSize: 13
+    }
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    style: {
+      border: '1px solid #f0f0f0',
+      padding: '6px 8px',
+      textAlign: 'left'
+    }
+  }, "\u884C\u53F7"), rules.map(function (r) {
+    var col = availableColumns.find(function (c) {
+      var _c$dataIndex4;
+      return String((_c$dataIndex4 = c.dataIndex) !== null && _c$dataIndex4 !== void 0 ? _c$dataIndex4 : c.key) === r.fieldKey;
+    });
+    return /*#__PURE__*/React.createElement("th", {
+      key: r.id,
+      style: {
+        border: '1px solid #f0f0f0',
+        padding: '6px 8px',
+        textAlign: 'left'
+      }
+    }, typeof (col === null || col === void 0 ? void 0 : col.title) === 'string' ? col.title : r.fieldKey);
+  }))), /*#__PURE__*/React.createElement("tbody", null, previewRows.map(function (item) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: item.index
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        border: '1px solid #f0f0f0',
+        padding: '6px 8px'
+      }
+    }, item.index + 1), rules.map(function (r) {
+      var _item$before, _item$after;
+      var before = (_item$before = item.before) === null || _item$before === void 0 ? void 0 : _item$before[r.fieldKey];
+      var after = (_item$after = item.after) === null || _item$after === void 0 ? void 0 : _item$after[r.fieldKey];
+      var changed = JSON.stringify(before) !== JSON.stringify(after);
+      return /*#__PURE__*/React.createElement("td", {
+        key: r.id,
+        style: {
+          border: '1px solid #f0f0f0',
+          padding: '6px 8px',
+          background: changed ? '#f6ffed' : undefined
+        }
+      }, changed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          textDecoration: 'line-through',
+          color: '#999'
+        }
+      }, before === undefined || before === null ? '—' : String(before)), ' → ', /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#52c41a',
+          fontWeight: 500
+        }
+      }, after === undefined || after === null ? '—' : String(after))) : /*#__PURE__*/React.createElement("span", null, before === undefined || before === null ? '—' : String(before)));
+    }));
+  })))), previewRows.length === 0 && /*#__PURE__*/React.createElement(Alert, {
+    message: "\u6CA1\u6709\u9009\u4E2D\u7684\u884C\u6216\u89C4\u5219\u4E3A\u7A7A",
+    type: "info",
+    showIcon: true
+  }), selectedRowKeys.length > 10 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 8,
+      fontSize: 12,
+      color: '#8c8c8c'
+    }
+  }, "\u4EC5\u5C55\u793A\u524D 10 \u884C\uFF0C\u5171 ", selectedRowKeys.length, " \u884C")));
+};
+export default BatchEditModal;