@luck-design-biz/luckda 0.0.25-2 → 0.0.25-21

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

@@ -0,0 +1,108 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useImperativeHandle, useState } from 'react';
+import { useMount, useCreation } from 'ahooks';
+import { keyBy } from 'lodash';
+import { Form, Row, Col, Select } from 'luck-design/antd';
+import styled from 'styled-components';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { JSEditor } from "../code-editor";
+import { getFrontRules } from "./meta/frontRules";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting.checkRules';
+var FormItem = styled(Form.Item).withConfig({
+  displayName: "FormItem",
+  componentId: "luckda-6530__sc-d9mrmm-0"
+})(["margin-bottom:0;"]);
+var CheckRules = function CheckRules(_ref) {
+  var form = _ref.form,
+    fields = _ref.fields,
+    rule = _ref.rule,
+    fieldData = _ref.fieldData,
+    ruleRef = _ref.ruleRef;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    verifyType = _useState2[0],
+    setVerifyType = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expression = _useState4[0],
+    setExpression = _useState4[1];
+  var jsRef = useRef();
+  useImperativeHandle(ruleRef, function () {
+    return jsRef.current;
+  });
+  useMount(function () {
+    if (rule.uid) {
+      form.setFieldsValue({
+        verifyType: rule.verifyType
+      });
+      setExpression(rule.expression);
+    } else {
+      var defaultType = getFrontRules(fieldData.property)[0].key;
+      form.setFieldsValue({
+        verifyType: defaultType
+      });
+      setVerifyType(defaultType);
+    }
+  });
+  var frontRulesObj = useCreation(function () {
+    return keyBy(getFrontRules(fieldData.property), 'key');
+  }, []);
+  var frontRule = useCreation(function () {
+    var _frontRulesObj$verify;
+    setExpression(((_frontRulesObj$verify = frontRulesObj[verifyType]) === null || _frontRulesObj$verify === void 0 ? void 0 : _frontRulesObj$verify.defaultCode) || '');
+    if (verifyType) return frontRulesObj[verifyType];
+    return {
+      noCode: false
+    };
+  }, [verifyType]);
+  return /*#__PURE__*/React.createElement(Form, {
+    layout: "vertical"
+  }, /*#__PURE__*/React.createElement(Row, {
+    gutter: 8
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement(FormItem, {
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".verifyType"),
+      label: '校验规则'
+    })
+  }, form.getFieldDecorator('verifyType', {
+    rules: [{
+      required: true,
+      message: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".message.verifyType"),
+        label: '请选择校验规则'
+      })
+    }]
+  })( /*#__PURE__*/React.createElement(Select, {
+    onChange: function onChange(val) {
+      console.log('setVerifyType');
+      setVerifyType(val);
+    }
+  }, getFrontRules(fieldData.property).map(function (rule) {
+    return /*#__PURE__*/React.createElement(Option, {
+      key: rule.key,
+      value: rule.key
+    }, rule.label);
+  }))))), !frontRule.noCode && /*#__PURE__*/React.createElement(Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '14px',
+      marginBottom: '16px',
+      color: 'rgba(0, 0, 0, 0.85)'
+    }
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".logic"),
+    label: '校验逻辑'
+  })), /*#__PURE__*/React.createElement(JSEditor, {
+    style: {
+      height: '300px',
+      border: '1px solid rgb(217, 217, 217)',
+      borderRadius: '4px',
+      padding: '12px'
+    },
+    ref: jsRef
+  }, expression))));
+};
+export default CheckRules;

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

@@ -29,7 +29,7 @@ var CheckRules = function CheckRules(_ref) {
   }, /*#__PURE__*/React.createElement(Row, {
     gutter: 8
   }, /*#__PURE__*/React.createElement(Col, {
-    span: 12
+    span: 24
   }, /*#__PURE__*/React.createElement(FormItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".verifyType"),
@@ -50,31 +50,6 @@ var CheckRules = function CheckRules(_ref) {
     }, val));
     return types;
   }, []))))), /*#__PURE__*/React.createElement(Col, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(FormItem, {
-    label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".verifyScope"),
-      label: '校验类型'
-    })
-  }, form.getFieldDecorator('verifyScope', {
-    rules: [{
-      required: true,
-      message: formatMessage({
-        id: "".concat(_I18N_PREFIX_, ".message.verifyScope"),
-        label: '请选择校验类型'
-      })
-    }]
-  })( /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Option, {
-    value: 0
-  }, formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".frontend"),
-    label: '前端'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: 1
-  }, formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".backend"),
-    label: '后端'
-  })))))), /*#__PURE__*/React.createElement(Col, {
     span: 24
   }, /*#__PURE__*/React.createElement(FormItem, {
     label: formatMessage({

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

@@ -2,12 +2,15 @@ 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 from 'react';
+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) {
@@ -27,6 +30,7 @@ var FieldRulesModal = Form.create({
     _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) {
@@ -34,7 +38,8 @@ var FieldRulesModal = Form.create({
           setTrue();
           form.validateFields( /*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(err, vals) {
-              var request, data, _yield$request, code;
+              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:
@@ -48,29 +53,35 @@ var FieldRulesModal = Form.create({
                     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({}, vals), {}, {
-                        uid: 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({}, vals), {}, {
-                        dataModelKey: dataModelKey
+                      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 = 7;
+                    _context.next = 9;
                     return request(data);
-                  case 7:
+                  case 9:
                     _yield$request = _context.sent;
                     code = _yield$request.code;
                     setFalse();
                     if (code === 1) {
-                      onClose(true);
+                      onClose(true, (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? 0 : 1);
                     }
-                  case 11:
+                  case 13:
                   case "end":
                     return _context.stop();
                 }
@@ -87,7 +98,10 @@ var FieldRulesModal = Form.create({
     }, _callee2);
   })));
   return /*#__PURE__*/React.createElement(Modal, {
-    title: 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,
+    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() {
@@ -104,9 +118,15 @@ var FieldRulesModal = Form.create({
     },
     onOk: handleOk,
     onCancel: function onCancel() {
-      return onClose(false);
+      return onClose(false, (rule === null || rule === void 0 ? void 0 : rule.ruleType) === 'front' ? 0 : 1);
     }
-  }, /*#__PURE__*/React.createElement(CheckRules, {
+  }, (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],

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

@@ -1,10 +1,13 @@
+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 } from 'ahooks';
-import { Spin, Input, Segmented, Switch, Tooltip, Icon, Radio } from 'luck-design/antd';
+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 } from 'lodash';
+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";
@@ -13,6 +16,7 @@ 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_ = [{
@@ -100,12 +104,16 @@ var SettingUI = function SettingUI(_ref) {
     setRules = _useState6[1];
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    condition = _useState8[0],
-    setCondition = _useState8[1];
+    frontRules = _useState8[0],
+    setFrontRules = _useState8[1];
   var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    optionalFields = _useState10[0],
-    setOptionalFields = _useState10[1];
+    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: [{
@@ -131,20 +139,37 @@ var SettingUI = function SettingUI(_ref) {
       }],
       ready: !isBatch,
       refreshDeps: [fieldData.datasetFieldUid],
-      onSuccess: function onSuccess(_ref4) {
+      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$;
-          setRules((_detail$list$ = detail[list[0]]) === null || _detail$list$ === void 0 ? void 0 : _detail$list$.ccmModuleFieldVerifies);
+          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,
-    rulesRefresh = _useRequest2.refresh;
-  var handleFieldRulesModalClose = useMemoizedFn(function (success) {
-    success && rulesRefresh();
+    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) {
@@ -170,6 +195,55 @@ var SettingUI = function SettingUI(_ref) {
       }
     })));
   });
+  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');
+              },
+              zIndex: 1001,
+              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, {
@@ -183,7 +257,7 @@ var SettingUI = function SettingUI(_ref) {
     onChange: function onChange(e) {
       return onAliasChange(fieldData, e.target.value);
     }
-  })) : null, component === 'table' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PanelItem, {
+  })) : null, ['table', 'tableForm'].includes(component) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".width"),
       label: '列宽'
@@ -242,7 +316,7 @@ var SettingUI = function SettingUI(_ref) {
     onChange: function onChange(val) {
       return run('tip', val);
     }
-  }))), component === 'form' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PanelItem, {
+  }))), component === 'form' && /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".fieldColumn"),
       label: '占列数'
@@ -260,58 +334,7 @@ var SettingUI = function SettingUI(_ref) {
     value: 3
   }, "3"), /*#__PURE__*/React.createElement(Radio, {
     value: 4
-  }, "4"))), /*#__PURE__*/React.createElement(PanelItem, {
-    label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".fieldRow"),
-      label: '占行数'
-    })
-  }, /*#__PURE__*/React.createElement(StyledRadio, {
-    defaultValue: fieldData.row,
-    onChange: function onChange(e) {
-      return run('row', 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"))), /*#__PURE__*/React.createElement(PanelItem, {
-    label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".fieldNote"),
-      label: '字段注释'
-    })
-  }, /*#__PURE__*/React.createElement(Input, {
-    defaultValue: fieldData.note,
-    onChange: function onChange(val) {
-      return runDebounce('note', val);
-    },
-    size: "small"
-  })), /*#__PURE__*/React.createElement(PanelItem, {
-    label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".fieldTip"),
-      label: '长说明'
-    })
-  }, /*#__PURE__*/React.createElement(Input, {
-    defaultValue: fieldData.tip,
-    onChange: function onChange(val) {
-      return runDebounce('tip', val);
-    },
-    size: "small"
-  })), /*#__PURE__*/React.createElement(PanelItem, {
-    label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".placeholder"),
-      label: '默认提示'
-    })
-  }, /*#__PURE__*/React.createElement(Input, {
-    defaultValue: fieldData.placeholder,
-    onChange: function onChange(val) {
-      return runDebounce('placeholder', val);
-    },
-    size: "small"
-  }))), !isBatch ? /*#__PURE__*/React.createElement(PanelItem, {
+  }, "4"))), !isBatch ? /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
       id: "".concat(_I18N_PREFIX_, ".isEqual"),
       label: '唯一校验'
@@ -327,15 +350,15 @@ var SettingUI = function SettingUI(_ref) {
       id: "".concat(_I18N_PREFIX_, ".required"),
       label: '是否必填'
     })
-  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), 'table' === component && /*#__PURE__*/React.createElement(PanelItem, {
+  }, renderCodeIcon(fieldRequired, FIELD_SCOPES.FIELD_REQUIRED)), ['table', 'tableForm'].includes && /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".display"),
-      label: '是否显示'
+      id: "".concat(_I18N_PREFIX_, ".table.display"),
+      label: '表格中显示'
     })
-  }, renderCodeIcon(fieldTable, FIELD_SCOPES.FIELD_TABLE_DISPLAY)), 'form' === component && /*#__PURE__*/React.createElement(PanelItem, {
+  }, renderCodeIcon(fieldTable, FIELD_SCOPES.FIELD_TABLE_DISPLAY)), ['form', 'tableForm'].includes(component) && /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".display"),
-      label: '是否显示'
+      id: "".concat(_I18N_PREFIX_, ".form.display"),
+      label: '表单中显示'
     })
   }, renderCodeIcon(fieldForm, FIELD_SCOPES.FIELD_FORM_DISPLAY)), /*#__PURE__*/React.createElement(PanelItem, {
     label: formatMessage({
@@ -362,7 +385,61 @@ var SettingUI = function SettingUI(_ref) {
   }), "\n              \u3010").concat(fieldDefaultValue.expression, "\u3011") : formatMessage({
     id: 'luckda.lowcode.painter.setting',
     label: '设置'
-  }))) : null, !isBatch ? /*#__PURE__*/React.createElement(Collapse, {
+  }))) : 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: '校验规则'
@@ -376,7 +453,9 @@ var SettingUI = function SettingUI(_ref) {
       label: '添加校验规则'
     }),
     handleAdd: function handleAdd() {
-      return setRule({});
+      return setRule({
+        ruleType: 'back'
+      });
     }
   }, rules === null || rules === void 0 ? void 0 : rules.map(function (_rule) {
     return /*#__PURE__*/React.createElement(ListEditorItem, {
@@ -393,7 +472,9 @@ var SettingUI = function SettingUI(_ref) {
           cursor: 'pointer'
         },
         onClick: function onClick() {
-          return setRule(_rule);
+          return setRule(_objectSpread(_objectSpread({}, _rule), {}, {
+            ruleType: 'back'
+          }));
         }
       })), /*#__PURE__*/React.createElement(Tooltip, {
         title: formatMessage({
@@ -406,13 +487,13 @@ var SettingUI = function SettingUI(_ref) {
           cursor: 'pointer'
         },
         onClick: function onClick() {
-          return run('delRule', _rule.uid);
+          return handleDelete(_rule.uid, 1);
         }
       }))),
       item: _rule,
       sortable: false
     });
-  }))) : null, /*#__PURE__*/React.createElement(FieldAttrsModal, {
+  })))) : null, /*#__PURE__*/React.createElement(FieldAttrsModal, {
     dataModelKey: dataModelKey,
     datasetId: datasetId,
     moduleId: moduleId,