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

package/es/lowcode/view/lc-components/Table/index.js

@@ -1,26 +1,31 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["context", "id", "className", "dataset", "width", "height", "bordered", "zebra", "autoLoad", "readOnly", "suppressActions", "actionsColumnWidth", "actions", "pagination", "pageSize", "showSizeChanger", "showQuickJumper", "hideOnSinglePage", "paginationSimple", "suppressPreset"];
-import React, { useRef } from 'react';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { useMemoizedFn, useCreation, useUpdateEffect, useLatest } from 'ahooks';
-import LdGrid from "../../../../components/LdGrid";
+import { useMemoizedFn, useCreation, useUnmount } from 'ahooks';
+import { isNil, isString, keyBy } from 'lodash';
 import classNames from 'classnames';
+import { useContext, useRemoteSource } from "../../../engine/provider/ContextProvider";
 import Wrapper from "../Wrapper";
-import { omitBadProps } from "../../../engine/tools/helper";
+import { LdGrid, LDActions } from "../../../../index";
+import TopFilter from "./components/TopFilter";
+import { omitBadProps, executeCode } from "../../../engine/tools/helper";
 import defaultMeta from "../../../engine/meta/table.props.default.json";
-var LCTable = function LCTable(_ref) {
-  var context = _ref.context,
-    id = _ref.id,
+import { LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT } from "../../../constants";
+var LCTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
     className = _ref.className,
     dataset = _ref.dataset,
     width = _ref.width,
     height = _ref.height,
+    fields = _ref.fields,
+    draggable = _ref.draggable,
     bordered = _ref.bordered,
     zebra = _ref.zebra,
     autoLoad = _ref.autoLoad,
     readOnly = _ref.readOnly,
+    renderIndex = _ref.renderIndex,
     suppressActions = _ref.suppressActions,
     actionsColumnWidth = _ref.actionsColumnWidth,
     actions = _ref.actions,
@@ -31,9 +36,27 @@ var LCTable = function LCTable(_ref) {
     hideOnSinglePage = _ref.hideOnSinglePage,
     paginationSimple = _ref.paginationSimple,
     suppressPreset = _ref.suppressPreset,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var ref = useRef();
-  var latestZebra = useLatest(zebra);
+    impexp = _ref.impexp,
+    topActionGroup = _ref.topActionGroup,
+    topFilter = _ref.topFilter,
+    rowSelection = _ref.rowSelection,
+    suppressRowSelectionPagination = _ref.suppressRowSelectionPagination,
+    rowSelectionMode = _ref.rowSelectionMode,
+    defaultRowSelectedCode = _ref.defaultRowSelectedCode,
+    rowSelectableCode = _ref.rowSelectableCode,
+    bantchActions = _ref.bantchActions,
+    formatDataSource = _ref.formatDataSource,
+    getDataPath = _ref.getDataPath,
+    columnsRewrite = _ref.columnsRewrite,
+    columnsReset = _ref.columnsReset,
+    modelParams = _ref.modelParams,
+    onGridReady = _ref.onGridReady,
+    advance = _ref.advance;
+  var ctx = useContext();
+  var _useRemoteSource = useRemoteSource(),
+    module = _useRemoteSource.module;
+  var wrapperRef = useRef();
+  var instanceRef = useRef();
   var _pagination = useCreation(function () {
     return {
       isFlow: !pagination,
@@ -51,65 +74,258 @@ var LCTable = function LCTable(_ref) {
     return {
       actionsColumn: suppressActions ? null : {
         width: actionsColumnWidth,
-        maxCount: actions.max,
-        type: actions.type,
+        maxCount: (actions.current || actions).max,
+        type: (actions.current || actions).type,
         getActions: function getActions() {
-          return actions.todoList.map(function (_action) {
+          return (actions.current || actions).todoList.map(function (action) {
             return {
-              title: _action.name,
-              action: function action(d) {
-                console.log('doAction', d, _action);
-              },
-              resource: _action.serial,
-              style: _action.riskLevel === 'default' ? null : {
+              title: action.name,
+              action: function (_action) {
+                function action(_x, _x2, _x3) {
+                  return _action.apply(this, arguments);
+                }
+                action.toString = function () {
+                  return _action.toString();
+                };
+                return action;
+              }(function (data, rowIndex, params) {
+                ctx.doAction(action.actionPool, {
+                  data: data,
+                  rowIndex: rowIndex,
+                  params: params
+                });
+              }),
+              resource: action.serial,
+              style: action.riskLevel === 'default' ? null : {
                 color: {
                   danger: '#ff7875',
-                  destroy: '#820014'
-                }[_action.riskLevel]
+                  destroy: '#ff4d4f'
+                }[action.riskLevel]
               }
             };
           });
         }
       }
     };
-  }, [suppressActions, actionsColumnWidth, actions]);
-  useUpdateEffect(function () {
-    var itemsToUpdate = [];
-    ref.current.gridApi.api.forEachNode(function (rowNode) {
-      if (rowNode.rowIndex % 2 === 0) itemsToUpdate.push(rowNode.data);
+  }, [suppressActions, actionsColumnWidth, actions.current || actions]);
+  var _rowSelection = useCreation(function () {
+    return rowSelection ? {
+      rowSelection: {
+        mode: rowSelectionMode,
+        suppressPagination: suppressRowSelectionPagination,
+        isDefaultSelected: function isDefaultSelected(d, n) {
+          if (isNil(defaultRowSelectedCode)) return false;
+          return executeCode(ctx, defaultRowSelectedCode, ['data', 'node'], d, n);
+        },
+        isRowSelectable: function isRowSelectable(d, n) {
+          if (isNil(rowSelectableCode)) return true;
+          return executeCode(ctx, rowSelectableCode, ['data', 'node'], d, n);
+        },
+        onSelect: function onSelect(data, isSelected, SelectedRows, params) {
+          ctx.doAction(advance.events.onRowSelected, {
+            data: data,
+            isSelected: isSelected,
+            SelectedRows: SelectedRows,
+            params: params
+          });
+        },
+        onChange: function onChange(rows, nodes, params) {
+          ctx.doAction(advance.events.onRowSelected, {
+            rows: rows,
+            nodes: nodes,
+            params: params
+          });
+        }
+      }
+    } : false;
+  }, [rowSelection, suppressRowSelectionPagination, rowSelectionMode, defaultRowSelectedCode, rowSelectableCode]);
+  var _export = useCreation(function () {
+    return {
+      enableExportAll: !!impexp.export,
+      apiUrl: isString(impexp.export) ? impexp.export : void 0
+    };
+  }, [impexp.export]);
+  var _batchActions = useCreation(function () {
+    return {
+      batchOperations: bantchActions.todoList.map(function (action) {
+        return {
+          key: action.id,
+          title: action.name,
+          resource: action.serial
+        };
+      }),
+      onBatchOperationsClick: function onBatchOperationsClick(key, selectedRows) {
+        ctx.doAction(action.actionPool, {
+          key: key,
+          selectedRows: selectedRows
+        });
+      }
+    };
+  }, [bantchActions.todoList]);
+  var _others = useCreation(function () {
+    var temp = {
+      defaultColDef: {
+        draggable: draggable
+      }
+    };
+    if (!isNil(formatDataSource)) {
+      temp.formatDataSource = function (list, detail) {
+        return executeCode(ctx, formatDataSource, ['list', 'detail'], list, detail);
+      };
+    }
+    if (!isNil(getDataPath)) {
+      temp.getDataPath = function (data) {
+        return executeCode(ctx, getDataPath, ['data'], data);
+      };
+    }
+    if (!isNil(columnsRewrite) || !isNil(fields)) {
+      temp.columnsRewrite = function (cols) {
+        var colsMap = keyBy(cols, 'field');
+        var _cols = isNil(fields) ? cols : fields.map(function (_field) {
+          return _objectSpread(_objectSpread({}, colsMap[_field.field]), _field);
+        });
+        return isNil(columnsRewrite) ? _cols : executeCode(ctx, columnsRewrite, ['columns'], _cols);
+      };
+    }
+    if (!isNil(columnsReset)) {
+      temp.columnsReset = function (cols) {
+        return executeCode(ctx, columnsReset, ['columns'], cols);
+      };
+    }
+    if (!isNil(modelParams)) {
+      temp.overModel = executeCode(ctx, modelParams);
+    }
+    return temp;
+  }, [fields, formatDataSource, getDataPath, columnsRewrite, columnsReset, modelParams, draggable]);
+  var renderFunctionArea = useMemoizedFn(function () {
+    var _topActionGroup$todoL;
+    return !!(topActionGroup !== null && topActionGroup !== void 0 && (_topActionGroup$todoL = topActionGroup.todoList) !== null && _topActionGroup$todoL !== void 0 && _topActionGroup$todoL.length) ? /*#__PURE__*/React.createElement(LDActions, _extends({}, topActionGroup, {
+      doAction: function doAction(action) {
+        return ctx.doAction(action, {
+          indtance: instanceRef.current
+        });
+      }
+    })) : null;
+  });
+  var renderFilterArea = useMemoizedFn(function () {
+    return topFilter ? /*#__PURE__*/React.createElement(TopFilter, {
+      filter: topFilter
+    }) : null;
+  });
+  var _wrapperProps = useCreation(function () {
+    return _defineProperty({
+      id: id
+    }, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT);
+  }, []);
+  var _getRowStyle = useMemoizedFn(function (params) {
+    var _zebra = isNil(zebra.current) ? zebra : zebra.current;
+    var condition = _zebra !== null && _zebra !== void 0 && _zebra.condition ? executeCode(ctx, _zebra.condition, ['params'], params) : _zebra && params.node.rowIndex % 2 === 0;
+    return condition ? {
+      'background-color': _zebra.color || _zebra
+    } : {
+      'background-color': '#fff'
+    };
+  });
+  var _readFilter = useMemoizedFn(function (params, filters) {
+    return ctx._setPagePublicResource({
+      params: params,
+      filters: filters
+    });
+  });
+  var _handleGridReady = useMemoizedFn(function (params, instance) {
+    instanceRef.current = instance;
+    onGridReady === null || onGridReady === void 0 || onGridReady(params, instance);
+    ctx.doAction(advance.events.onMount, {
+      params: params,
+      instance: instance
+    });
+  });
+  var _handleRowClick = useMemoizedFn(function (data, rowIndex, params) {
+    ctx.doAction(advance.events.onRowClick, {
+      data: data,
+      rowIndex: rowIndex,
+      params: params
     });
-    ref.current.gridApi.api.updateRowData({
-      update: itemsToUpdate
+  });
+  var _handleRowDoubleClick = useMemoizedFn(function (data, rowIndex, params) {
+    ctx.doAction(advance.events.onRowDoubleClick, {
+      data: data,
+      rowIndex: rowIndex,
+      params: params
+    });
+  });
+  var _handleRowDragged = useMemoizedFn(function (toId, fromId, params) {
+    if (advance.events.onRowDragged) {
+      ctx.doAction(advance.events.onRowDragged, {
+        toId: toId,
+        fromId: fromId,
+        params: params
+      });
+    } else {
+      ctx.doAction([['drag', {
+        category: 'page-action',
+        code: JSON.stringify({
+          moduleCode: module.moduleCode,
+          datasetCode: dataset.code,
+          data: {
+            toId: toId,
+            fromId: fromId
+          }
+        })
+      }]]);
+    }
+  });
+  var _afterInit = useMemoizedFn(function (res, dispatch, props) {
+    ctx.doAction(advance.events.afterInit, {
+      res: res,
+      dispatch: dispatch,
+      props: props
+    });
+  });
+  var _afterQuery = useMemoizedFn(function (res) {
+    ctx.doAction(advance.events.afterQuery, {
+      res: res
+    });
+  });
+  useUnmount(function () {
+    ctx.doAction(advance.events.onUnmount, {
+      instance: instanceRef.current
     });
-  }, [zebra]);
+  });
   var getTargetDom = useMemoizedFn(function () {
-    return ref.current.wrapperRef.current;
+    return wrapperRef.current;
   });
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
+    displayName: "Table",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement(LdGrid, _extends({
     ref: ref,
+    wrapper: wrapperRef,
+    wrapperProps: _wrapperProps,
     width: width,
     height: height,
     bordered: bordered,
-    id: id,
     className: classNames(_defineProperty({}, className, !!className)),
     ldId: id,
-    dataSetKey: dataset,
+    dataSetKey: dataset === null || dataset === void 0 ? void 0 : dataset.code,
     readOnly: readOnly,
+    renderIndex: renderIndex,
     suppressInit: !autoLoad,
-    getRowStyle: function getRowStyle(params) {
-      return latestZebra.current && params.node.rowIndex % 2 === 0 ? {
-        'background-color': latestZebra.current
-      } : {
-        'background-color': '#fff'
-      };
-    },
+    getRowStyle: _getRowStyle,
     suppressPreset: suppressPreset
-    // operates={resources}
-  }, _pagination, _actionsColumn)));
-};
+  }, _pagination, _actionsColumn, _rowSelection, _export, _batchActions, _others, {
+    readFilter: _readFilter,
+    renderFunctionArea: renderFunctionArea,
+    renderFilterArea: renderFilterArea,
+    onGridReady: _handleGridReady,
+    onRowClick: _handleRowClick,
+    onRowDoubleClick: _handleRowDoubleClick,
+    onRowDragged: _handleRowDragged,
+    afterInit: _afterInit,
+    afterQuery: _afterQuery
+  })));
+});
 LCTable.propTypes = {
   /**
    * @name 唯一标识
@@ -121,7 +337,10 @@ LCTable.propTypes = {
    * @name 数据集
    * @type _DataSetSelector
    */
-  dataset: PropTypes.string,
+  dataset: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    uid: PropTypes.string.isRequired
+  }),
   /**
    * @name 自动加载
    * @desc 首次数据是否自动加载，若存在必须带搜索条件再加载的情况，需要关闭
@@ -236,8 +455,106 @@ LCTable.propTypes = {
    * @name 操作项
    * @type _TableActions
    * @groupNext actionsColumn
+   * @default {"display": "text", "max": 2, "moreText": "更多行为", "todoList": []}
+   */
+  actions: PropTypes.shape({
+    display: PropTypes.oneOf(['text', 'button']),
+    max: PropTypes.number,
+    moreText: PropTypes.string,
+    todoList: PropTypes.array
+  }),
+  /**
+   * @name 顶部操作
+   * @type _ActionGroup
+   * @default {"display": "button", "max": 2, "moreText": "操作", "todoList": []}
+   */
+  topActionGroup: PropTypes.shape({
+    display: PropTypes.oneOf(['text', 'button']),
+    max: PropTypes.number,
+    moreText: PropTypes.string,
+    todoList: PropTypes.array
+  }),
+  /**
+   * @name 顶部过滤器
+   * @type _TableTopFilter
+   */
+  topFilter: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.shape({
+    options: PropTypes.array.isRequired,
+    field: PropTypes.string.isRequired
+  })]),
+  /**
+   * @name 开启行选择器
+   * @type boolean
+   * @default false
+   */
+  rowSelection: PropTypes.bool,
+  /**
+   * @name 停用分页多选
+   * @type boolean
+   * @default false
+   */
+  suppressRowSelectionPagination: PropTypes.bool,
+  /**
+   * @name 选择器模式
+   * @type segmented
+   * @options [{label: '复选', value: 'multiple'}, {label: '单选', value: 'single'}]
+   * @default 'multiple'
+   */
+  rowSelectionMode: PropTypes.oneOf(['single', 'multiple']),
+  /**
+   * @name 默认选中
+   * @type _JSEditor
+   * @default "function getDefaultRowSelected(data, node, ctx) { \n return false; \n}"
+   */
+  defaultRowSelectedCode: PropTypes.string,
+  /**
+   * @name 行是否可选
+   * @type _JSEditor
+   * @default "function getRowSelectable(data, node, ctx) { \n return true; \n}"
+   */
+  rowSelectableCode: PropTypes.string,
+  /**
+   * @name 导入导出
+   * @type _ImpExp
+   * @default { "export": true }
+   */
+  impexp: PropTypes.shape({
+    import: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    export: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  }),
+  /**
+   * @name 批量操作
+   * @type _BatchActions
+   * @default { "todoList": [] }
+   */
+  bantchActions: PropTypes.shape({
+    todoList: PropTypes.array
+  }),
+  /**
+   * @name 格式化数据
+   * @type _JSEditor
+   */
+  formatDataSource: PropTypes.string,
+  /**
+   * @name 构建树层级
+   * @type _JSEditor
+   */
+  getDataPath: PropTypes.string,
+  /**
+   * @name 重写表格列
+   * @type _JSEditor
+   */
+  columnsRewrite: PropTypes.string,
+  /**
+   * @name 重置表格列
+   * @type _JSEditor
+   */
+  columnsReset: PropTypes.string,
+  /**
+   * @name model参数
+   * @type _JSEditor
    */
-  actions: PropTypes.array
+  modelParams: PropTypes.string
 };
-LCTable.defaultProps = omitBadProps(defaultMeta, ['actionsColumn']);
+LCTable.defaultProps = omitBadProps(defaultMeta);
 export default LCTable;