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

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

@@ -4,8 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import { useRequest, useSetState, useDebounceFn, useMemoizedFn } from 'ahooks';
-import { Modal } from 'luck-design/antd';
-import { formatMessage } from '@luck-design-biz/base/utils';
 import { dropWhile, startsWith } from 'lodash';
 import { useContext } from "../../../engine/provider/ContextProvider";
 import SettingUI from "./SettingUI";
@@ -211,88 +209,57 @@ var FieldSetting = function FieldSetting(_ref) {
     }),
     runDebounce = _useDebounceFn.run;
   var run = useMemoizedFn( /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(key, val) {
-      var mapping, _stateItem, request, c, d, _yield$request, code;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(key, val) {
+      var _yield$fetchDelAttrs, code, mapping, _stateItem, request, c, d, _yield$request, _code;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!(key === 'isEqual')) {
-              _context2.next = 5;
+              _context.next = 5;
               break;
             }
-            _context2.next = 3;
+            _context.next = 3;
             return runFetchUpdateUniqueField(_defineProperty({
               moduleDatasetUid: datasetId,
               moduleUid: moduleId
             }, val ? 'uniqueFieldUid' : 'noUniqueFieldUid', fieldData.uid));
           case 3:
-            _context2.next = 30;
+            _context.next = 34;
             break;
           case 5:
             if (!(key === 'align' || key === 'headerAlign' || key === 'pinned' || key === 'tip')) {
-              _context2.next = 9;
+              _context.next = 9;
               break;
             }
             handleUIChange(key, val);
-            _context2.next = 30;
+            _context.next = 34;
             break;
           case 9:
             if (!(key === 'col' || key === 'row')) {
-              _context2.next = 13;
+              _context.next = 13;
               break;
             }
             handleUIChange(key, val);
-            _context2.next = 30;
+            _context.next = 34;
             break;
           case 13:
             if (!(key === 'delRule')) {
-              _context2.next = 17;
+              _context.next = 21;
               break;
             }
-            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 _yield$fetchDelAttrs, code;
-                  return _regeneratorRuntime().wrap(function _callee$(_context) {
-                    while (1) switch (_context.prev = _context.next) {
-                      case 0:
-                        _context.next = 2;
-                        return fetchDelAttrs({
-                          moduleDatasetUid: fieldData.datasetFieldUid,
-                          ccmModuleFieldVerifies: [{
-                            uid: val
-                          }],
-                          scope: FIELD_SCOPES.CHECK_RULES
-                        });
-                      case 2:
-                        _yield$fetchDelAttrs = _context.sent;
-                        code = _yield$fetchDelAttrs.code;
-                        if (code === 1) {
-                          rulesRefresh();
-                        }
-                      case 5:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }, _callee);
-                }));
-                function onOk() {
-                  return _onOk.apply(this, arguments);
-                }
-                return onOk;
-              }()
+            _context.next = 16;
+            return fetchDelAttrs({
+              moduleDatasetUid: fieldData.datasetFieldUid,
+              ccmModuleFieldVerifies: [{
+                uid: val
+              }],
+              scope: FIELD_SCOPES.CHECK_RULES
             });
-            _context2.next = 30;
-            break;
-          case 17:
+          case 16:
+            _yield$fetchDelAttrs = _context.sent;
+            code = _yield$fetchDelAttrs.code;
+            return _context.abrupt("return", code === 1);
+          case 21:
             mapping = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, FIELD_SCOPES.FIELD_REQUIRED, {
               key: 'fieldRequired',
               refresh: requiredRefresh
@@ -328,19 +295,19 @@ var FieldSetting = function FieldSetting(_ref) {
             if (!_stateItem) {
               d.datasetBusinessUids = [fieldData.uid];
             }
-            _context2.next = 27;
+            _context.next = 31;
             return request(d);
-          case 27:
-            _yield$request = _context2.sent;
-            code = _yield$request.code;
-            if (code === 1) {
+          case 31:
+            _yield$request = _context.sent;
+            _code = _yield$request.code;
+            if (_code === 1) {
               mapping[key].refresh();
             }
-          case 30:
+          case 34:
           case "end":
-            return _context2.stop();
+            return _context.stop();
         }
-      }, _callee2);
+      }, _callee);
     }));
     return function (_x, _x2) {
       return _ref8.apply(this, arguments);

package/es/lowcode/painter/components/field-setting/meta/frontRules.js

@@ -0,0 +1,53 @@
+export var getFrontRules = function getFrontRules(property) {
+  var rules = [];
+  switch (property) {
+    case 'number':
+    case 'money':
+    case 'decimal':
+    case 'sint':
+      rules = [{
+        label: '最小值',
+        key: 'min',
+        defaultCode: "function min(cValue) { \n return 0; // 返回数字 \n}"
+      }, {
+        label: '最大值',
+        key: 'max',
+        defaultCode: "function max(cValue) { \n return 100; // 返回数字 \n}"
+      }];
+      break;
+    case 'string':
+      rules = [{
+        label: '长度',
+        key: 'length',
+        defaultCode: "function length(cValue) { \n return 100; // 返回数字 \n}"
+      }, {
+        label: '邮箱',
+        key: 'email',
+        noCode: true
+      }, {
+        label: '身份证',
+        key: 'idcard',
+        noCode: true
+      }, {
+        label: '手机号码',
+        key: 'mobile',
+        noCode: true
+      }];
+      break;
+    case 'text':
+      rules = [{
+        label: '长度',
+        key: 'length',
+        defaultCode: "function length(cValue) { \n return 100; // 返回数字 \n}"
+      }];
+      break;
+    default:
+      ;
+  }
+  rules.push({
+    label: '自定义',
+    key: 'rules',
+    defaultCode: "function validator(cValue, rule, value, callback) { \n if(!value) callback('errorMsg'); \n callback(); \n}"
+  });
+  return rules;
+};

package/es/lowcode/painter/panel-section/ActionsEditor/index.js

@@ -28,7 +28,8 @@ var _DISPLAY_OPTIONS_ = [{
   value: 'text'
 }];
 var ActionsEditor = function ActionsEditor(_ref) {
-  var defaultValue = _ref.defaultValue,
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
     suppressDisplay = _ref.suppressDisplay,
     suppressMax = _ref.suppressMax,
@@ -217,6 +218,7 @@ var ActionsEditor = function ActionsEditor(_ref) {
     }));
   })))), /*#__PURE__*/React.createElement(ActionBindModal, {
     event: action,
+    nodeId: nodeId,
     defaultCode: defaultCode,
     onComfirm: function onComfirm(actionPool) {
       return handleValueChange('action', _objectSpread(_objectSpread({}, omit(action, ['key'])), {}, {

package/es/lowcode/painter/panel-section/BlocksEditor/index.js

@@ -1,13 +1,12 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _toArray from "@babel/runtime/helpers/esm/toArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import { Icon, Dropdown, Button, Menu, Modal } from 'luck-design/antd';
 import { concat, reduce, sortBy, includes, cloneDeep } from 'lodash';
 import { formatMessage, suid } from '@luck-design-biz/base/utils';
-import { usePageData } from "../../../engine/provider/ContextProvider";
+import { useGet } from "../../../engine/provider/ContextProvider";
 import { SortBox, SortItem } from "../../components/SortBox";
 import BlockEditorItem from "./BlockEditorItem";
 import defaultMeta from "../../../engine/meta/form.props.default.json";
@@ -49,15 +48,10 @@ var BlockEditor = function BlockEditor(_ref) {
     nodeId = _ref.nodeId,
     renderPanelItems = _ref.renderPanelItems,
     innerProps = _ref.innerProps;
-  var _usePageData = usePageData({
-      id: nodeId
-    }),
-    _usePageData2 = _slicedToArray(_usePageData, 1),
-    node = _usePageData2[0];
-  var _ref2 = node || {
-      props: {}
-    },
-    blocks = _ref2.props.blocks;
+  var blocks = useGet({
+    id: nodeId,
+    path: 'props.blocks'
+  });
   var handleAddBlock = useMemoizedFn(function (type) {
     var _id = "block_".concat(suid());
     var newData = concat(blocks, _objectSpread(_objectSpread({
@@ -111,13 +105,12 @@ var BlockEditor = function BlockEditor(_ref) {
         order: index + 1
       });
     });
-    console.log('newData', newData, sortItems);
     onChange(newData);
   });
   var menu = useCreation(function () {
     return /*#__PURE__*/React.createElement(Menu, {
-      onClick: function onClick(_ref3) {
-        var key = _ref3.key;
+      onClick: function onClick(_ref2) {
+        var key = _ref2.key;
         return handleAddBlock(key);
       }
     }, addOptions.map(function (opt) {
@@ -163,7 +156,7 @@ var BlockEditor = function BlockEditor(_ref) {
   }, renderPanelItems(commonProps.map(function (p) {
     var cloneP = cloneDeep(p);
     if (cloneP.key === 'dataset') {
-      cloneP.next.props[0].valueKey = "blocks[0].fields";
+      cloneP.fieldsKey = 'blocks[0].fields';
     }
     return _objectSpread(_objectSpread({}, cloneP), {}, {
       disabled: includes(['mode', 'serialEffect'], cloneP.key) || cloneP.disabled,
@@ -208,8 +201,9 @@ var BlockEditor = function BlockEditor(_ref) {
       cloneP.valueKey = "blocks[".concat(i + 1, "].").concat(p.key);
       if (p.key === 'dataset') {
         if (includes(['auto', 'grid', 'writer'], blockItem.type)) {
-          if (blockItem.type !== 'auto') cloneP.next.props[0].component = "table";
-          cloneP.next.props[0].valueKey = "blocks[".concat(i + 1, "].fields");
+          if (blockItem.type !== 'auto') cloneP.component = 'tableForm';
+          cloneP.fieldsKey = "blocks[".concat(i + 1, "].fields");
+          ;
           result.push(cloneP);
         }
       } else result.push(cloneP);

package/es/lowcode/painter/panel-section/ButtonType.js

@@ -5,10 +5,12 @@ import React from 'react';
 import { Select, Button } from 'luck-design/antd';
 import styles from "../style/button-type.less";
 var ButtonType = function ButtonType(_ref) {
-  var onChange = _ref.onChange,
+  var _onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-    onChange: onChange,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
     className: styles['lc-painter-panel-section-components-buttontype']
   }), /*#__PURE__*/React.createElement(Select.Option, {
     value: "primary"

package/es/lowcode/painter/panel-section/ComponentSelector.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { Select } from 'luck-design/antd';
+import { reduce, get } from 'lodash';
+import { useContext } from "../../engine/provider/ContextProvider";
+var ComponentSelector = function ComponentSelector(_ref) {
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange,
+    filter = _ref.filter;
+  var ctx = useContext();
+  return /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    allowClear: true,
+    defaultValue: defaultValue,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    }
+  }, reduce(ctx.componentList, function (ret, _ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      compId = _ref3[0],
+      comp = _ref3[1];
+    if (compId !== nodeId && (!filter || filter.find(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        val = _ref5[1];
+      return get(comp, key) === val;
+    }))) {
+      ret.push( /*#__PURE__*/React.createElement(Select.Option, {
+        value: compId
+      }, comp.meta.name || compId));
+    }
+    return ret;
+  }, []));
+};
+export default ComponentSelector;

package/es/lowcode/painter/panel-section/DataSetSelector.js

@@ -1,4 +1,5 @@
 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, { useEffect, useState } from 'react';
@@ -7,6 +8,7 @@ import styled from 'styled-components';
 import { Select, Button, Tooltip } from 'luck-design/antd';
 import { useRemoteSource } from "../../engine/provider/ContextProvider";
 import { fetchAddDataset } from "../../constants/api-url";
+import { getLDMetaAttr } from "../../engine/tools/helper";
 var Div = styled.div.withConfig({
   displayName: "Div",
   componentId: "luckda-6530__sc-onj9tc-0"
@@ -14,6 +16,9 @@ var Div = styled.div.withConfig({
 var DataSetSelector = function DataSetSelector(_ref) {
   var defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
+    _ref$fieldsKey = _ref.fieldsKey,
+    fieldsKey = _ref$fieldsKey === void 0 ? 'fields' : _ref$fieldsKey,
+    component = _ref.component,
     size = _ref.size,
     isTree = _ref.isTree,
     next = _ref.next;
@@ -29,8 +34,7 @@ var DataSetSelector = function DataSetSelector(_ref) {
     dataset = _useRemoteSource.dataset,
     fetchAllDatasetLoading = _useRemoteSource.fetchAllDatasetLoading,
     refreshModlueData = _useRemoteSource.refreshModlueData,
-    refreshDataset = _useRemoteSource.refreshDataset,
-    pageinfo = _useRemoteSource.pageinfo;
+    refreshDataset = _useRemoteSource.refreshDataset;
   var _useRequest = useRequest(fetchAddDataset, {
       manual: true
     }),
@@ -44,12 +48,12 @@ var DataSetSelector = function DataSetSelector(_ref) {
   }, [dataset, isTree]);
   var handleChange = useMemoizedFn( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value, _ref3) {
-      var key, _pageinfo$relationshi, moduleId, dataModelKey, _yield$runAsync, code, res, _ds;
+      var key, _getLDMetaAttr, _getLDMetaAttr2, moduleId, dataModelKey, _yield$runAsync, code, res, _ds;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             key = _ref3.key;
-            _pageinfo$relationshi = pageinfo.relationship, moduleId = _pageinfo$relationshi.moduleId, dataModelKey = _pageinfo$relationshi.dataModelKey;
+            _getLDMetaAttr = getLDMetaAttr(['moduleId', 'dataModelKey']), _getLDMetaAttr2 = _slicedToArray(_getLDMetaAttr, 2), moduleId = _getLDMetaAttr2[0], dataModelKey = _getLDMetaAttr2[1];
             _context.next = 4;
             return runAsync({
               uid: moduleId,
@@ -75,7 +79,28 @@ var DataSetSelector = function DataSetSelector(_ref) {
                 code: value,
                 uid: key
               };
-              onChange(_ds);
+              onChange(_ds, function (exe) {
+                var dsFields = res.data.dataSets[value];
+                exe(fieldsKey, dsFields.map(function (f) {
+                  var restProps = {
+                    fieldAliasName: f.fieldAliasName || f.fieldName
+                  };
+                  if (['table', 'tableForm'].includes(component)) {
+                    var _extra = JSON.parse(f.extra || '{}');
+                    var alignMapping = {
+                      0: 'left',
+                      1: 'center',
+                      2: 'right'
+                    };
+                    restProps.align = alignMapping[_extra.scell_alignment];
+                    restProps.headerAlign = alignMapping[_extra.sheading_alignment];
+                  }
+                  return _objectSpread({
+                    uid: f.uid,
+                    field: f.field
+                  }, restProps);
+                }));
+              });
               setCurrentDataset(_ds);
             }
           case 11:
@@ -115,9 +140,10 @@ var DataSetSelector = function DataSetSelector(_ref) {
     disabled: !currentDataset,
     onClick: function onClick() {
       return next({
-        pageinfo: pageinfo,
         datasetUid: currentDataset.uid,
-        datasetCode: currentDataset.code
+        datasetCode: currentDataset.code,
+        valueKey: fieldsKey,
+        component: component
       });
     }
   }), /*#__PURE__*/React.createElement(Button, {

package/es/lowcode/painter/panel-section/FieldsSetting.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useReducer, useState } from 'react';
-import { useMemoizedFn, useRequest, useDebounceFn, useCreation, useMap } from 'ahooks';
+import { useMemoizedFn, useRequest, useCreation, useMap, useUpdateEffect } from 'ahooks';
 import { Ellipsis } from 'luck-design';
 import { Spin, Input, Tooltip, Icon, Checkbox, Drawer } from 'luck-design/antd';
 import styled from 'styled-components';
@@ -12,11 +12,11 @@ import { SortBox, SortItem } from "../components/SortBox";
 import { ListEditor, ListEditorItem } from "../components/ListEditor";
 import FieldSetting from "../components/field-setting";
 import BatchSetting from "../components/field-setting/BatchSetting";
-import { fetchFieldsByDataset, fetchUpdateFieldAttrs } from "../../constants/api-url";
-import { listReducer } from "../../engine/tools/helper";
+import { fetchFieldsByDataset } from "../../constants/api-url";
+import { listReducer, getLDMetaAttr } from "../../engine/tools/helper";
 import styles from "../style/fields-setting.less";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
-var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'col', 'row', 'note', 'placeholder'];
+var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'col', 'row', 'note', 'placeholder', 'fieldAliasName'];
 var Header = styled.div.withConfig({
   displayName: "Header",
   componentId: "luckda-6530__sc-gcwvp1-0"
@@ -27,7 +27,6 @@ var FieldKey = styled(Ellipsis).withConfig({
 })(["width:80px;margin-left:4px;"]);
 var FieldsSetting = function FieldsSetting(_ref) {
   var component = _ref.component,
-    pageinfo = _ref.pageinfo,
     datasetUid = _ref.datasetUid,
     nodeId = _ref.nodeId,
     defaultValue = _ref.defaultValue,
@@ -46,21 +45,35 @@ var FieldsSetting = function FieldsSetting(_ref) {
     checkedFields = _useMap2[0],
     _useMap2$ = _useMap2[1],
     set = _useMap2$.set,
-    remove = _useMap2$.remove;
+    get = _useMap2$.get,
+    setAll = _useMap2$.setAll,
+    remove = _useMap2$.remove,
+    reset = _useMap2$.reset;
   var _useState3 = useState(void 0),
     _useState4 = _slicedToArray(_useState3, 2),
     drawerType = _useState4[0],
     setDrawerType = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    checkAll = _useState6[0],
+    setCheckAll = _useState6[1];
   var fieldData = useCreation(function () {
     return fields.find(function (_ref2) {
       var uid = _ref2.uid;
       return uid === fieldId;
     });
   }, [fieldId, fields]);
+  useUpdateEffect(function () {
+    if (checkedFields.size === fields.length) {
+      setCheckAll(true);
+    } else if (checkedFields.size === 0) {
+      setCheckAll(false);
+    }
+  }, [checkedFields, fields]);
   var _useRequest = useRequest(fetchFieldsByDataset, {
       defaultParams: [{
         datasetUid: datasetUid,
-        moduleUid: pageinfo.relationship.moduleId
+        moduleUid: getLDMetaAttr('moduleId')
       }],
       onSuccess: function onSuccess(_ref3) {
         var code = _ref3.code,
@@ -74,18 +87,23 @@ var FieldsSetting = function FieldsSetting(_ref) {
             return ret;
           }, []), list.map(function (id) {
             var _fieldData = detail[id];
-            var extraAttr = JSON.parse(_fieldData.extraAttr || '{}');
-            var alignMapping = {
-              0: 'left',
-              1: 'center',
-              2: 'right'
+            var restProps = {
+              fieldAliasName: _fieldData.fieldAliasName
             };
-            return {
+            if (['table', 'tableForm'].includes(component)) {
+              var extra = JSON.parse(_fieldData.extra || '{}');
+              var alignMapping = {
+                0: 'left',
+                1: 'center',
+                2: 'right'
+              };
+              restProps.align = alignMapping[extra.scell_alignment];
+              restProps.headerAlign = alignMapping[extra.sheading_alignment];
+            }
+            return _objectSpread({
               uid: id,
-              field: detail[id].field,
-              align: alignMapping[extraAttr.scell_alignment],
-              headerAlign: alignMapping[extraAttr.sheading_alignment]
-            };
+              field: detail[id].field
+            }, restProps);
           }), 'uid');
           if (!isEqual(_fields, defaultValue)) {
             onChange(_fields);
@@ -105,34 +123,6 @@ var FieldsSetting = function FieldsSetting(_ref) {
       return _fieldData._type === 'divider' ? _fieldData : pick(_fieldData, _PICK_KEYS_);
     }));
   });
-  var _useRequest2 = useRequest(fetchUpdateFieldAttrs, {
-      manual: true
-    }),
-    runUpdateFieldAttrs = _useRequest2.runAsync;
-  var _useDebounceFn = useDebounceFn(function (field, value) {
-      var _pageinfo$relationshi = pageinfo.relationship,
-        moduleId = _pageinfo$relationshi.moduleId,
-        dataModelKey = _pageinfo$relationshi.dataModelKey;
-      runUpdateFieldAttrs({
-        dataModelKey: dataModelKey,
-        datasetBusinessUids: [field.uid],
-        fieldAliasName: value,
-        moduleDatasetUid: datasetUid,
-        moduleUid: moduleId,
-        scope: 'FIELD_ALIAS_NAME',
-        uid: field.uid
-      }).then(function () {
-        if (component === 'table') {
-          var gridApi = ctx.componentMap.get(nodeId).api.self.ref.current.gridApi;
-          var col = gridApi.columnApi.getColumn(field.field);
-          col.colDef.headerName = value;
-          gridApi.api.refreshHeader();
-        }
-      });
-    }, {
-      wait: 500
-    }),
-    run = _useDebounceFn.run;
   var handleSortChange = useMemoizedFn(function (sortItems, fromIndex, toIndex) {
     dispatch({
       type: 'sort',
@@ -154,9 +144,19 @@ var FieldsSetting = function FieldsSetting(_ref) {
         data: {
           fieldAliasName: value
         }
+      },
+      callback: function callback(newFields) {
+        if (component === 'table') {
+          setTimeout(function () {
+            var gridApi = ctx.componentMap.get(nodeId).api.self.ref.current.gridApi;
+            var col = gridApi.columnApi.getColumn(field.field);
+            col.colDef.headerName = value;
+            gridApi.api.refreshHeader();
+          });
+        }
+        handleChange(newFields);
       }
     });
-    run(field, value);
   });
   var handleFieldCheckChange = useMemoizedFn(function (e) {
     var _e$target = e.target,
@@ -168,6 +168,15 @@ var FieldsSetting = function FieldsSetting(_ref) {
       remove(data.uid, data);
     }
   });
+  var handleFieldCheckAll = useMemoizedFn(function (e) {
+    if (e.target.checked) {
+      setAll(fields.map(function (_field) {
+        return [_field.uid, _field];
+      }));
+    } else {
+      reset();
+    }
+  });
   var handleBatchSetting = useMemoizedFn(function () {
     setDrawerType('batch');
   });
@@ -181,7 +190,7 @@ var FieldsSetting = function FieldsSetting(_ref) {
           uid: groupId,
           id: groupId,
           field: 'divider',
-          fieldAliasName: 'Group',
+          fieldName: 'Group',
           _type: 'divider'
         }
       },
@@ -223,10 +232,18 @@ var FieldsSetting = function FieldsSetting(_ref) {
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spin, {
     spinning: loading
-  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Checkbox, {
+    style: {
+      marginLeft: 20
+    },
+    disabled: drawerType === 'batch',
+    checked: checkAll,
+    indeterminate: checkedFields.size > 0 && checkedFields.size !== fields.length,
+    onChange: handleFieldCheckAll
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      width: 116,
-      paddingLeft: 40
+      width: 80,
+      paddingLeft: 4
     }
   }, formatMessage({
     id: "".concat(_I18N_PREFIX_, ".field"),
@@ -267,6 +284,7 @@ var FieldsSetting = function FieldsSetting(_ref) {
       left: /*#__PURE__*/React.createElement(React.Fragment, null, field._type !== 'divider' ? /*#__PURE__*/React.createElement(Checkbox, {
         disabled: drawerType === 'batch',
         data: field,
+        checked: !!get(field.uid),
         onChange: handleFieldCheckChange
       }) : null, /*#__PURE__*/React.createElement(FieldKey, {
         tooltip: true,
@@ -309,8 +327,8 @@ var FieldsSetting = function FieldsSetting(_ref) {
     dispatch: dispatch,
     nodeId: nodeId,
     fieldData: fieldData,
-    dataModelKey: pageinfo.relationship.dataModelKey,
-    moduleId: pageinfo.relationship.moduleId,
+    dataModelKey: getLDMetaAttr('dataModelKey'),
+    moduleId: getLDMetaAttr('moduleId'),
     datasetId: datasetUid,
     component: component,
     onAliasChange: handleAliasChange,
@@ -319,8 +337,8 @@ var FieldsSetting = function FieldsSetting(_ref) {
     dispatch: dispatch,
     nodeId: nodeId,
     fieldsData: checkedFields,
-    dataModelKey: pageinfo.relationship.dataModelKey,
-    moduleId: pageinfo.relationship.moduleId,
+    dataModelKey: getLDMetaAttr('dataModelKey'),
+    moduleId: getLDMetaAttr('moduleId'),
     datasetId: datasetUid,
     component: component,
     onChange: handleChange