@luck-design-biz/luckda 0.0.26 → 1.0.0-alpha

package/es/lowcode/painter/components/field-setting/FieldRulesModal.js

@@ -0,0 +1,135 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef } from 'react';
+import { useMemoizedFn, useBoolean } from 'ahooks';
+import { Modal, Form } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import CheckRules from "./CheckRules";
+import CheckFrontRules from "./CheckFrontRules";
+import { fetchAddFieldAttrs, fetchUpdateFieldAttrs } from "../../../constants/api-url";
+import { FIELD_SCOPES } from "../../../constants";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
+var FieldRulesModal = Form.create({
+  name: 'field-rules-form'
+})(function (_ref) {
+  var _condition$FIELD_SCOP;
+  var form = _ref.form,
+    rule = _ref.rule,
+    dataModelKey = _ref.dataModelKey,
+    fieldData = _ref.fieldData,
+    datasetId = _ref.datasetId,
+    moduleId = _ref.moduleId,
+    condition = _ref.condition,
+    fields = _ref.fields,
+    onClose = _ref.onClose;
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    loading = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var frontRuleRef = useRef();
+  var handleOk = useMemoizedFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          setTrue();
+          form.validateFields( /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(err, vals) {
+              var _frontRuleRef$current;
+              var request, data, expression, _val, _yield$request, code;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    if (!err) {
+                      _context.next = 2;
+                      break;
+                    }
+                    return _context.abrupt("return");
+                  case 2:
+                    request = rule.uid ? fetchUpdateFieldAttrs : fetchAddFieldAttrs;
+                    data = {
+                      scope: FIELD_SCOPES.CHECK_RULES
+                    };
+                    expression = (_frontRuleRef$current = frontRuleRef.current) === null || _frontRuleRef$current === void 0 ? void 0 : _frontRuleRef$current.editor.getValue();
+                    _val = expression ? _objectSpread(_objectSpread({}, vals), {}, {
+                      expression: expression
+                    }) : vals;
+                    if (rule.uid) {
+                      data.ccmModuleFieldVerifies = [_objectSpread(_objectSpread({}, _val), {}, {
+                        uid: rule.uid,
+                        verifyScope: (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? 0 : 1
+                      })];
+                    } else {
+                      data.ccmModuleFieldVerifies = [_objectSpread(_objectSpread({}, _val), {}, {
+                        dataModelKey: dataModelKey,
+                        verifyScope: (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? 0 : 1
+                      })];
+                      data.dataModelKey = dataModelKey;
+                      data.datasetBusinessUids = [fieldData.uid];
+                      data.moduleDatasetUid = datasetId;
+                      data.moduleUid = moduleId;
+                    }
+                    _context.next = 9;
+                    return request(data);
+                  case 9:
+                    _yield$request = _context.sent;
+                    code = _yield$request.code;
+                    setFalse();
+                    if (code === 1) {
+                      onClose(true, (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? 0 : 1);
+                    }
+                  case 13:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            return function (_x, _x2) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  return /*#__PURE__*/React.createElement(Modal, {
+    title: (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".rules.front"),
+      label: '前端校验规则'
+    }) : condition === null || condition === void 0 || (_condition$FIELD_SCOP = condition[FIELD_SCOPES.CHECK_RULES]) === null || _condition$FIELD_SCOP === void 0 ? void 0 : _condition$FIELD_SCOP.scopeName,
+    width: 800,
+    visible: !!rule,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    destroyOnClose: true,
+    okButtonProps: {
+      loading: loading
+    },
+    bodyStyle: {
+      marginTop: 0,
+      height: 'auto'
+    },
+    onOk: handleOk,
+    onCancel: function onCancel() {
+      return onClose(false, (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? 0 : 1);
+    }
+  }, (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' && /*#__PURE__*/React.createElement(CheckFrontRules, {
+    form: form,
+    rule: rule,
+    fields: fields,
+    ruleRef: frontRuleRef,
+    fieldData: fieldData
+  }), (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'back' && /*#__PURE__*/React.createElement(CheckRules, {
+    form: form,
+    rule: rule,
+    condition: condition === null || condition === void 0 ? void 0 : condition[FIELD_SCOPES.CHECK_RULES],
+    fields: fields
+  }));
+});
+export default FieldRulesModal;

package/es/lowcode/painter/components/field-setting/SettingUI.js

@@ -0,0 +1,518 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { useRequest, useMemoizedFn, useCreation } from 'ahooks';
+import { Spin, Input, Segmented, Switch, Tooltip, Icon, Radio, Modal } from 'luck-design/antd';
+import styled from 'styled-components';
+import { isArray, keyBy, isNil, groupBy } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import Collapse from "../../components/Collapse";
+import PanelItem from "../../components/PanelItem";
+import { ListEditor, ListEditorItem } from "../../components/ListEditor";
+import WidthHeight from "../../panel-section/WidthHeight";
+import FieldAttrsModal from "./FieldAttrsModal";
+import FieldRulesModal from "./FieldRulesModal";
+import { fetchFieldCondition, fetchAttrs } from "../../../constants/api-url";
+import { getFrontRules } from "./meta/frontRules";
+import { FIELD_SCOPES } from "../../../constants";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
+var _ALIGN_OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".align.left"),
+    label: '居左'
+  }),
+  value: 'left'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".align.center"),
+    label: '居中'
+  }),
+  value: 'center'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".align.right"),
+    label: '居右'
+  }),
+  value: 'right'
+}];
+var _PINNED_OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".fixed.none"),
+    label: '不固定'
+  }),
+  value: 'none'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".fixed.left"),
+    label: '左'
+  }),
+  value: 'left'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".fixed.right"),
+    label: '右'
+  }),
+  value: 'right'
+}];
+var _TRUE_FALSE_ = ['__TRUE__', '__FALSE__'];
+var CoderWrapper = styled.div.withConfig({
+  displayName: "CoderWrapper",
+  componentId: "luckda-6530__sc-1n41f3z-0"
+})(["display:flex;align-content:center;justify-content:space-between;i{cursor:pointer;}"]);
+var DefaultValueWrapper = styled.span.withConfig({
+  displayName: "DefaultValueWrapper",
+  componentId: "luckda-6530__sc-1n41f3z-1"
+})(["color:var(--ant-primary-color);font-size:12px;padding:0 16px;display:inline-block;cursor:pointer;"]);
+var StyledRadio = styled(Radio.Group).withConfig({
+  displayName: "StyledRadio",
+  componentId: "luckda-6530__sc-1n41f3z-2"
+})(["span.ant-radio + *{padding-left:4px;padding-right:4px;}"]);
+var SettingUI = function SettingUI(_ref) {
+  var loading = _ref.loading,
+    data = _ref.data,
+    conditionsValue = _ref.conditionsValue,
+    dataModelKey = _ref.dataModelKey,
+    datasetId = _ref.datasetId,
+    moduleId = _ref.moduleId,
+    component = _ref.component,
+    runDebounce = _ref.runDebounce,
+    run = _ref.run,
+    onAliasChange = _ref.onAliasChange,
+    onFieldAttrsModalClose = _ref.onFieldAttrsModalClose;
+  var _ref2 = conditionsValue || {},
+    fieldDefaultValue = _ref2.fieldDefaultValue,
+    fieldRequired = _ref2.fieldRequired,
+    fieldWritable = _ref2.fieldWritable,
+    fieldReadonly = _ref2.fieldReadonly,
+    fieldTable = _ref2.fieldTable,
+    fieldForm = _ref2.fieldForm;
+  var isBatch = isArray(data);
+  var _useState = useState(void 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scope = _useState2[0],
+    setScope = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rule = _useState4[0],
+    setRule = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rules = _useState6[0],
+    setRules = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    frontRules = _useState8[0],
+    setFrontRules = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    condition = _useState10[0],
+    setCondition = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    optionalFields = _useState12[0],
+    setOptionalFields = _useState12[1];
+  var fieldData = isBatch ? {} : data;
+  var _useRequest = useRequest(fetchFieldCondition, {
+      defaultParams: [{
+        datasetId: datasetId,
+        moduleId: moduleId
+      }],
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code,
+          data = _ref3.data,
+          mainInfo = _ref3.mainInfo;
+        if (code === 1) {
+          setCondition(data);
+          setOptionalFields(mainInfo);
+        }
+      }
+    }),
+    _loading = _useRequest.loading;
+  // 读取校验规则
+  var _useRequest2 = useRequest(fetchAttrs, {
+      defaultParams: [{
+        uid: fieldData.datasetFieldUid,
+        scope: FIELD_SCOPES.CHECK_RULES
+      }],
+      ready: !isBatch,
+      refreshDeps: [fieldData.datasetFieldUid],
+      onSuccess: function onSuccess(_ref4, _ref5) {
+        var code = _ref4.code,
+          list = _ref4.list,
+          detail = _ref4.detail;
+        var _ref6 = _slicedToArray(_ref5, 1),
+          verifyScope = _ref6[0].verifyScope;
+        if (code === 1) {
+          var _detail$list$;
+          var _data = (_detail$list$ = detail[list[0]]) === null || _detail$list$ === void 0 ? void 0 : _detail$list$.ccmModuleFieldVerifies;
+          if (isNil(verifyScope)) {
+            var dataByGroup = groupBy(_data, 'verifyScope');
+            setRules(dataByGroup[1]);
+            setFrontRules(dataByGroup[0]);
+          } else if (verifyScope === 0) setFrontRules(_data);else if (verifyScope === 1) setRules(_data);
+        }
+      }
+    }),
+    rulesParams = _useRequest2.params,
+    rulesLoading = _useRequest2.loading,
+    rulesRun = _useRequest2.run;
+  var rulesRefresh = function rulesRefresh() {
+    var newParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return rulesRun(_objectSpread(_objectSpread({}, rulesParams[0]), newParams));
+  };
+  var propertyRules = useCreation(function () {
+    return keyBy(getFrontRules(fieldData.property), 'key');
+  }, [fieldData]);
+  var handleFieldRulesModalClose = useMemoizedFn(function (success, verifyScope) {
+    success && rulesRefresh({
+      verifyScope: verifyScope
+    });
+    setRule(null);
+  });
+  var renderCodeIcon = useMemoizedFn(function (_stateItem, _scope) {
+    var isCommon = !_stateItem || _TRUE_FALSE_.includes(_stateItem.conditionType);
+    var _props = isBatch ? null : {
+      checked: _stateItem && _stateItem.conditionType !== _TRUE_FALSE_[1]
+    };
+    return /*#__PURE__*/React.createElement(CoderWrapper, null, /*#__PURE__*/React.createElement(Switch, _extends({
+      size: "small"
+    }, _props, {
+      onChange: function onChange(checked) {
+        return run(_scope, checked);
+      }
+    })), /*#__PURE__*/React.createElement(Tooltip, {
+      title: isCommon ? null : "".concat(_stateItem.conditionTypeName, ": [").concat(_stateItem.showconfig, "]")
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "code",
+      style: isCommon ? null : {
+        color: '#1890ff'
+      },
+      onClick: function onClick() {
+        return setScope(_scope);
+      }
+    })));
+  });
+  var handleDelete = useMemoizedFn( /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(uid, verifyScope) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            Modal.confirm({
+              title: formatMessage({
+                id: 'luckda.lowcode.painter.delete.tip',
+                label: '确定删除吗？'
+              }),
+              getContainer: function getContainer() {
+                return document.getElementById('lc-design-workspace');
+              },
+              onOk: function () {
+                var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                  var success;
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return run('delRule', uid);
+                      case 2:
+                        success = _context.sent;
+                        if (success) rulesRefresh({
+                          verifyScope: verifyScope
+                        });
+                      case 4:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                function onOk() {
+                  return _onOk.apply(this, arguments);
+                }
+                return onOk;
+              }()
+            });
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x, _x2) {
+      return _ref7.apply(this, arguments);
+    };
+  }());
+  return /*#__PURE__*/React.createElement(Spin, {
+    spinning: _loading || loading || rulesLoading
+  }, !isBatch ? /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".title"),
+      label: '标题'
+    })
+  }, /*#__PURE__*/React.createElement(Input, {
+    value: fieldData.fieldAliasName,
+    size: "small",
+    onChange: function onChange(e) {
+      return onAliasChange(fieldData, e.target.value);
+    }
+  })) : null, ['table', 'tableForm'].includes(component) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".width"),
+      label: '列宽'
+    })
+  }, /*#__PURE__*/React.createElement(WidthHeight, {
+    defaultValue: fieldData.width,
+    size: "small",
+    options: [{
+      label: 'px',
+      value: 'px'
+    }],
+    convertInt: true,
+    onChange: function onChange(val) {
+      return runDebounce('width', val);
+    }
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".align"),
+      label: '内容对齐'
+    })
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: _ALIGN_OPTIONS_,
+    defaultValue: fieldData.align,
+    onChange: function onChange(val) {
+      return run('align', val);
+    }
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".headerAlign"),
+      label: '表头对齐'
+    })
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: _ALIGN_OPTIONS_,
+    defaultValue: fieldData.headerAlign,
+    onChange: function onChange(val) {
+      return run('headerAlign', val);
+    }
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".pinned"),
+      label: '固定列'
+    })
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: _PINNED_OPTIONS_,
+    defaultValue: fieldData.pinned,
+    onChange: function onChange(val) {
+      return run('pinned', val);
+    }
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".tip"),
+      label: '过长提示'
+    })
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    onChange: function onChange(val) {
+      return run('tip', val);
+    }
+  }))), component === 'form' && /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".fieldColumn"),
+      label: '占列数'
+    })
+  }, /*#__PURE__*/React.createElement(StyledRadio, {
+    defaultValue: fieldData.col,
+    onChange: function onChange(e) {
+      return run('col', e.target.value);
+    }
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: 1
+  }, "1"), /*#__PURE__*/React.createElement(Radio, {
+    value: 2
+  }, "2"), /*#__PURE__*/React.createElement(Radio, {
+    value: 3
+  }, "3"), /*#__PURE__*/React.createElement(Radio, {
+    value: 4
+  }, "4"))), !isBatch ? /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".isEqual"),
+      label: '唯一校验'
+    })
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    defaultChecked: fieldData.whetherUnique === 1,
+    onChange: function onChange(checked) {
+      return run('isEqual', checked);
+    }
+  })) : null, /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".required"),
+      label: '是否必填'
+    })
+  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes && /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".table.display"),
+      label: '表格中显示'
+    })
+  }, renderCodeIcon(fieldTable, FIELD_SCOPES.FIELD_TABLE_DISPLAY)), ['form', 'tableForm'].includes(component) && /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".form.display"),
+      label: '表单中显示'
+    })
+  }, renderCodeIcon(fieldForm, FIELD_SCOPES.FIELD_FORM_DISPLAY)), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".writable"),
+      label: '是否可写'
+    })
+  }, renderCodeIcon(fieldWritable, FIELD_SCOPES.FIELD_WRITABLE)), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".readonly"),
+      label: '是否只读'
+    })
+  }, renderCodeIcon(fieldReadonly, FIELD_SCOPES.FIELD_READONLY)), !isBatch ? /*#__PURE__*/React.createElement(Collapse, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".defaultValue"),
+      label: '默认值'
+    })
+  }, /*#__PURE__*/React.createElement(DefaultValueWrapper, {
+    onClick: function onClick() {
+      return setScope(FIELD_SCOPES.DEFAULT_VALUE);
+    }
+  }, fieldDefaultValue ? "\u3010".concat(condition === null || condition === void 0 ? void 0 : condition[FIELD_SCOPES.DEFAULT_VALUE].options[fieldDefaultValue.assign], "\u3011\n              ").concat(formatMessage({
+    id: 'luckda.lowcode.painter.settingTo',
+    label: '设置为'
+  }), "\n              \u3010").concat(fieldDefaultValue.expression, "\u3011") : formatMessage({
+    id: 'luckda.lowcode.painter.setting',
+    label: '设置'
+  }))) : null, !isBatch ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Collapse, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".rules.front"),
+      label: '前端校验规则'
+    }),
+    bodyStyle: {
+      padding: '12px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(ListEditor, {
+    addText: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".addRules"),
+      label: '添加校验规则'
+    }),
+    handleAdd: function handleAdd() {
+      return setRule({
+        ruleType: 'front'
+      });
+    }
+  }, frontRules === null || frontRules === void 0 ? void 0 : frontRules.map(function (_rule) {
+    return /*#__PURE__*/React.createElement(ListEditorItem, {
+      left: /*#__PURE__*/React.createElement("span", null, propertyRules[_rule.verifyType].label),
+      right: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'luckda.lowcode.painter.edit',
+          label: '编辑'
+        })
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "edit",
+        style: {
+          marginRight: '8px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return setRule(_objectSpread(_objectSpread({}, _rule), {}, {
+            ruleType: 'front'
+          }));
+        }
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'luckda.lowcode.painter.delete',
+          label: '删除'
+        })
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "delete",
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return handleDelete(_rule.uid, 0);
+        }
+      }))),
+      item: _rule,
+      sortable: false
+    });
+  }))), /*#__PURE__*/React.createElement(Collapse, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".rules"),
+      label: '校验规则'
+    }),
+    bodyStyle: {
+      padding: '12px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(ListEditor, {
+    addText: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".addRules"),
+      label: '添加校验规则'
+    }),
+    handleAdd: function handleAdd() {
+      return setRule({
+        ruleType: 'back'
+      });
+    }
+  }, rules === null || rules === void 0 ? void 0 : rules.map(function (_rule) {
+    return /*#__PURE__*/React.createElement(ListEditorItem, {
+      left: /*#__PURE__*/React.createElement("span", null, _rule.verifyTypeName),
+      right: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'luckda.lowcode.painter.edit',
+          label: '编辑'
+        })
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "edit",
+        style: {
+          marginRight: '8px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return setRule(_objectSpread(_objectSpread({}, _rule), {}, {
+            ruleType: 'back'
+          }));
+        }
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'luckda.lowcode.painter.delete',
+          label: '删除'
+        })
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "delete",
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return handleDelete(_rule.uid, 1);
+        }
+      }))),
+      item: _rule,
+      sortable: false
+    });
+  })))) : null, /*#__PURE__*/React.createElement(FieldAttrsModal, {
+    dataModelKey: dataModelKey,
+    datasetId: datasetId,
+    moduleId: moduleId,
+    data: data,
+    scope: scope,
+    condition: condition,
+    fields: optionalFields,
+    onClose: function onClose(success) {
+      onFieldAttrsModalClose === null || onFieldAttrsModalClose === void 0 || onFieldAttrsModalClose(scope, success);
+      setScope(void 0);
+    }
+  }), !isBatch ? /*#__PURE__*/React.createElement(FieldRulesModal, {
+    dataModelKey: dataModelKey,
+    datasetId: datasetId,
+    moduleId: moduleId,
+    fieldData: fieldData,
+    rule: rule,
+    condition: condition,
+    fields: optionalFields,
+    onClose: handleFieldRulesModalClose
+  }) : null);
+};
+export default SettingUI;