@hzab/list-render 1.10.20-alpha.0 → 1.10.20-alpha.1

package/README.md

@@ -112,11 +112,8 @@ const listDM = useMemo(
   - table-edit 整个 table 一起编辑;
   - table-edit-show 整个 table 可 一起编辑，直接显示表单;
   - line 编辑整行，编辑按钮在操作列;
-  - line-show 编辑整行，直接显示表单，编辑按钮在操作列;
   - line-cell 编辑整行，操作按钮在单元格;
-  - line-cell-show 编辑整行，直接显示表单，操作按钮在单元格;
   - cell 编辑指定单元格
-  - cell-show 编辑指定单元格，直接显示表单
 
 #### tableConf
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.20-alpha.0",
+  "version": "1.10.20-alpha.1",
   "description": "",
   "main": "src",
   "scripts": {
@@ -25,8 +25,8 @@
   "license": "ISC",
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
-    "@hzab/data-model": "^1.7.4",
-    "@hzab/form-render": "^1.7.12",
+    "@hzab/data-model": "^2.0.2",
+    "@hzab/form-render": "^1.7.13",
     "@hzab/formily-result-utils": "^1.2.0",
     "@hzab/permissions": "^1.0.0",
     "@hzab/schema-descriptions": "^1.3.0",

package/src/EditArrayTable/index.tsx

@@ -4,8 +4,11 @@ import { cloneDeep } from "lodash";
 import { Schema } from "@formily/json-schema";
 
 import FormRender from "@hzab/form-render";
-import { useIndex } from "@hzab/form-render/src/components/ArrayBase";
+import { useIndex, useArray, useRecord, SortHandle } from "@hzab/form-render/src/components/ArrayBase";
+
 import SchemaToArrayTable from "../components/Formily/SchemaToArrayTable";
+import { useSlotsComponents } from "../components/Formily/useComponents";
+import TableActions from "../table-render/TableActions";
 
 import "./index.less";
 
@@ -15,15 +18,32 @@ export interface IEditArrayTableProps {
     fetchOnEdit?: boolean;
     hasAction?: boolean;
     hideMessage?: boolean;
+    Slots?: Object;
   };
   config?: {
     isDargTable?: boolean;
     orderColType?: string;
+    colConf?: {
+      _$actions: Object;
+    };
+    rowSelection: {
+      selectedRowKeys: any[];
+    };
+    tableProps: {
+      rowSelection: {
+        selectedRowKeys: any[];
+      };
+    };
   };
   schema: Schema;
   list: Object[];
   components: Object[];
   schemaScope: Object;
+  onDetail;
+  onEdit;
+  onEditByTable;
+  onDel;
+  onSearch;
   getList: () => Promise<{ list: any[] }>;
   onEditSubmit: (val) => void;
   handleMessage: (msg) => void;
@@ -33,13 +53,11 @@ export interface IEditArrayTableProps {
   };
 }
 
-// TODO: 插槽、权限、拖拽、序号、行选择、列显隐、操作列
+// TODO: 权限、列显隐
 export const EditArrayTable = forwardRef(function (props: IEditArrayTableProps, parentRef) {
   const { topProps, schemaScope, getList, handleMessage, config, query } = props;
   const { hasAction, editMode } = topProps || {};
-  const { orderColType = "page" } = config || {};
-
-  console.log("config", config, query);
+  const { orderColType, tableProps } = config || {};
 
   const [editing, setEditing] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -52,16 +70,15 @@ export const EditArrayTable = forwardRef(function (props: IEditArrayTableProps,
   const schema = useMemo(() => {
     const schemaToArrayTable = new SchemaToArrayTable({
       schema: props.schema,
-      option: { hasAction, ...config },
+      config: { hasAction, hasIndex: orderColType === "page" || orderColType === "all", ...config },
+      topProps,
     });
     return schemaToArrayTable.handleSchema();
   }, [props.schema]);
 
+  const slotComponents = useSlotsComponents(topProps);
   const components = useMemo(() => {
-    return {
-      TableActions() {
-        return <div>TableActions</div>;
-      },
+    const coms = {
       TableIndex() {
         const index = useIndex();
         // 序号列
@@ -74,9 +91,41 @@ export const EditArrayTable = forwardRef(function (props: IEditArrayTableProps,
         }
         return null;
       },
-      ...props.components,
+      ...slotComponents,
+      TableActions(tProps) {
+        const index = useIndex();
+        const array = useArray();
+        const { onDetail, onEdit, onDel, onSearch, getList } = props;
+        const record = useRecord();
+        const cProps = {
+          ...tProps,
+          record,
+          index,
+          Slots: topProps.Slots,
+          onEdit,
+          onDel() {
+            array.field?.remove?.(index);
+            array.props?.onRemove?.(index);
+            onDel && onDel(record, index);
+          },
+          onDetail,
+          onSearch,
+          // TODO: 编辑删除按钮状态
+          // hasEdit,
+          // hasDel,
+          // onEditByTable,
+          getList,
+          tableConf: props.config,
+          colConf: config?.colConf?._$actions,
+          topProps,
+        };
+        return <TableActions {...cProps} />;
+      },
     };
-  }, [props.components, props.query.pageNum, props.query.pageSize]);
+    // HACK: 解决只读无法拖拽的问题
+    coms.ArrayTable.SortHandle = SortHandle;
+    return coms;
+  }, [slotComponents, props.query.pageNum, props.query.pageSize]);
 
   useImperativeHandle(
     parentRef,
@@ -92,6 +141,26 @@ export const EditArrayTable = forwardRef(function (props: IEditArrayTableProps,
     }
   }, [props.list]);
 
+  useEffect(() => {
+    // 动态设置 table props 值
+    formRef.current.formRender.setFieldState("arrayTable", (state) => {
+      let rowSelection;
+      if (config.rowSelection || tableProps?.rowSelection) {
+        rowSelection = {
+          ...state.componentProps?.rowSelection,
+          ...tableProps?.rowSelection,
+          ...config.rowSelection,
+          selectedRowKeys: config.rowSelection?.selectedRowKeys || tableProps?.rowSelection?.selectedRowKeys,
+        };
+      }
+      state.componentProps = {
+        ...state.componentProps,
+        ...tableProps,
+        rowSelection,
+      };
+    });
+  }, [config.rowSelection?.selectedRowKeys, tableProps]);
+
   function getVal() {
     return cloneDeep(formRef.current.formRender.values.arrayTable);
   }
@@ -186,7 +255,12 @@ export const EditArrayTable = forwardRef(function (props: IEditArrayTableProps,
         className="edit-array-table-form"
         schema={schema}
         components={components}
-        schemaScope={schemaScope}
+        schemaScope={{
+          ...schemaScope,
+          _data: {
+            selectedRowKeys: config?.rowSelection?.selectedRowKeys,
+          },
+        }}
         initialValues={{}}
         emptyValue={" "}
         formOptions={{ readPretty: editMode !== "table-edit-show" }}

package/src/components/Formily/FormilyEditTable/EditTableCell.tsx

@@ -123,6 +123,8 @@ export const EditableCell: React.FC<EditableCellProps> = ({
                       fieldRef.current = ref;
                     }
                   },
+                  record,
+                  index,
                 },
                 // 外部配置的禁用状态
                 "x-pattern": disabled || !editing ? "readPretty" : field?.["x-pattern"] ?? "editable",

package/src/components/Formily/FormilyEditTable/EditTableRow.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import { useMemo } from "react";
 import { Form } from "antd";
 import { createForm, onFormValuesChange, onFieldValueChange, Field } from "@formily/core";
 import { FormProvider, FormConsumer } from "@formily/react";
@@ -55,6 +55,10 @@ export const EditTableRow: React.FC<EditableRowProps> = (props: EditableRowProps
     if (rowFormMapRef) {
       rowFormMapRef.current.set(rowId, form);
     }
+
+    if (record) {
+      form.setValues(record);
+    }
     return form;
   }, [record]);
 

package/src/components/Formily/FormilyEditTable/index.tsx

@@ -1,16 +1,15 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import { Card, Slider, Rate, Button } from "antd";
+import React, { useState, useCallback, useRef } from "react";
+import { Button } from "antd";
 import { createSchemaField } from "@formily/react";
 import { cloneDeep } from "lodash";
 
-import { antdComponents, customComponents } from "@hzab/form-render";
-import { getFormilyGlobalComponents } from "@hzab/utils/src/formily/global-components";
+import { useSlotsComponents } from "../useComponents";
 
-import { Item, EditMode } from "./type";
+import { Item } from "./type";
 
 export const useEditTable = (props) => {
   const { rowFormMapRef, editingInofRef, topProps, idKey, columns, onEditSubmit } = props;
-  const { editMode = "modal" } = topProps || {};
+  const { editMode = "modal", Slots } = topProps || {};
   const preIdRef = useRef("");
   const preIdxRef = useRef(null);
   const preRecordRef = useRef({});
@@ -27,16 +26,7 @@ export const useEditTable = (props) => {
     schemaScopeRef.current._$tempData = {};
   }
 
-  const components = {
-    // Upload,
-    Card,
-    Slider,
-    Rate,
-    ...antdComponents,
-    ...customComponents,
-    ...getFormilyGlobalComponents(),
-    ...props.components,
-  };
+  const components = useSlotsComponents(topProps);
 
   const SchemaField = useCallback(
     createSchemaField({
@@ -166,9 +156,7 @@ export const useEditTable = (props) => {
       ...col,
       onCell: (record: Item, ...args) => {
         let editing = false;
-        if (editMode === "table-line-show") {
-          editing = true;
-        } else if (editMode === "cell") {
+        if (editMode === "cell") {
           editing = isEditing(record) && isEditingCell(col.dataIndex);
         } else {
           editing = isEditing(record);

package/src/components/Formily/FormilyEditTable/type.d.ts

@@ -3,4 +3,4 @@ export interface Item {
   key: string;
 }
 
-export type EditMode = "modal" | "line" | "line-cell" | "cell" | "table-line-show";
+export type EditMode = "modal" | "line" | "line-cell" | "cell" | "table-edit" | "table-edit-show";

package/src/components/Formily/SchemaToArrayTable.ts

@@ -11,19 +11,21 @@ export class SchemaToArrayTable {
     form: {};
     schema: Schema;
   };
-  option = {};
+  config = {};
+  topProps = {};
   constructor(params) {
-    const { schema, option } = params || {};
+    const { schema, config, topProps } = params || {};
     this._schema = cloneDeep(schema);
-    this.option = option || {};
+    this.config = config || {};
+    this.topProps = topProps || {};
   }
   /**
    * 处理 schema，把普通的 schema 表单字段转为自增表格的列
    * @returns
    */
   handleSchema(schema = this._schema, opt?) {
-    const { isDargTable, hasAction } = opt || this.option;
-    const schemaTpl = this.getSchemaTpl();
+    const { isDargTable, hasAction, hasIndex } = opt || this.config;
+    const schemaTpl = this.getSchemaTpl(this.config);
     const properties: Record<string, any> = {};
     // schema 布局信息
     schemaTpl.form = {
@@ -33,7 +35,7 @@ export class SchemaToArrayTable {
     // 添加拖拽排序列
     isDargTable && this.pushItem(properties, this.getSortTpl());
     // 添加序号
-    isDargTable && this.pushItem(properties, this.getIndexTpl());
+    hasIndex && this.pushItem(properties, this.getIndexTpl());
     // 处理表单数据列
     Object.keys(schema.schema?.properties).forEach((key, i) => {
       const it = schema.schema?.properties[key];
@@ -46,10 +48,9 @@ export class SchemaToArrayTable {
     // 添加操作列
     hasAction !== false && this.pushItem(properties, this.getActionsTpl());
     // 添加移动排序操作列
-    isDargTable && this.pushItem(properties, this.getMoveActionsTpl());
+    // isDargTable && this.pushItem(properties, this.getMoveActionsTpl());
 
     schemaTpl.schema.properties.arrayTable.items.properties = properties;
-    console.log("schemaTpl", schemaTpl);
 
     return schemaTpl;
   }
@@ -109,12 +110,12 @@ export class SchemaToArrayTable {
     properties[item.name]["x-index"] = Object.keys(properties).length - 1;
     return properties;
   }
-  sortItems() {}
   /**
    * 获取 schema 模板字符串
    * @returns
    */
-  getSchemaTpl() {
+  getSchemaTpl(config) {
+    const { onSortStart, onSortEnd } = config || {};
     return {
       form: {},
       schema: {
@@ -126,12 +127,15 @@ export class SchemaToArrayTable {
             "x-component": "ArrayTable",
             "x-validator": [],
             "x-component-props": {
+              // TODO: ts
+              // @ts-ignore
+              ...this.topProps.tableProps,
               pagination: false,
-              onSortStart() {
-                console.log("onSortStart");
+              onSortStart(...args) {
+                onSortStart && onSortStart(...args);
               },
-              onSortEnd() {
-                console.log("onSortEnd");
+              onSortEnd(...args) {
+                onSortEnd && onSortEnd(...args);
               },
             },
             "x-decorator-props": {},

package/src/components/Formily/useComponents.tsx

@@ -0,0 +1,80 @@
+import { useMemo } from "react";
+import { Card, Slider, Rate } from "antd";
+import { useField, useFieldSchema } from "@formily/react";
+
+import { antdComponents, customComponents } from "@hzab/form-render";
+import { getFormilyGlobalComponents } from "@hzab/utils/src/formily/global-components";
+import { useIndex, useRecord } from "@hzab/form-render/src/components/ArrayBase";
+
+export const useComponents = (props) => {
+  const components = useMemo(
+    () => ({
+      // Upload,
+      Card,
+      Slider,
+      Rate,
+      ...antdComponents,
+      ...customComponents,
+      ...getFormilyGlobalComponents(),
+      ...props.components,
+    }),
+    [props.components],
+  );
+
+  return components;
+};
+
+export const useSlotsComponents = (props) => {
+  const { Slots = {} } = props;
+
+  const components = useComponents(props);
+
+  const slotsComponents = useMemo(() => {
+    const formilyComponents = {
+      ...components,
+    };
+
+    const tComs = {
+      ...formilyComponents,
+    };
+
+    Object.keys(formilyComponents || {}).forEach((key) => {
+      formilyComponents[key] = function (cProps) {
+        const field = useField();
+        const index = useIndex();
+        const record = useRecord();
+
+        const fieldSchema = useFieldSchema();
+        const name = fieldSchema.name;
+        const comName = fieldSchema["x-component"];
+        const OrigCom = tComs[key];
+
+        // HACK: ArrayTable.SortHandle 类似写法问题修复
+        Object.setPrototypeOf(formilyComponents[key], OrigCom);
+
+        // 插槽
+        const SCom = Slots[name];
+        if (key === comName && SCom) {
+          const slotProps = {
+            ...cProps,
+            index,
+            record,
+            text: cProps.value,
+            field: field,
+            fieldSchema: fieldSchema,
+            /** 原始组件 */
+            OrigCom,
+          };
+          return <SCom {...slotProps} />;
+        }
+
+        return <OrigCom {...cProps} />;
+      };
+    });
+    return formilyComponents;
+  }, [components]);
+
+  return slotsComponents;
+};
+
+export default useComponents;

package/src/pagination-render/index.less

@@ -1,11 +1,11 @@
-.pagination-render-wrap {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding-top: 20px;
-  .pagination-render {
-    li {
-      margin-bottom: 8px;
-    }
-  }
-}
+.pagination-render-wrap {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 20px;
+  .pagination-render {
+    li {
+      margin-bottom: 8px;
+    }
+  }
+}

package/src/table-render/TableActions.tsx

@@ -0,0 +1,95 @@
+import { Form, Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
+
+/**
+ * 编辑按钮隐藏
+ */
+export const editModeHideList = ["cell", "line-cell"];
+
+export function TableActions(props) {
+  const {
+    text,
+    record,
+    index,
+    topProps,
+    tableConf,
+    colConf,
+    onEditByTable,
+    onDetail,
+    onEdit,
+    onDel,
+    onSearch,
+    getList,
+  } = props;
+  const { idKey = "id", i18n, Slots, editMode = "modal" } = topProps || {};
+  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
+
+  const slotProps = { text, record, index, onEdit: onEdit, onDel: onDel, onSearch, getList };
+
+  if (Slots?.tableActionsSlot) {
+    return <Slots.tableActionsSlot {...slotProps} />;
+  }
+
+  const { hasEdit, hasDel, hasDelTips, hasDetail = false } = tableConf || {};
+
+  // 编辑按钮权限
+  const _hasEdit =
+    !editModeHideList.includes(editMode) &&
+    (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
+
+  // 详情按钮权限
+  const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
+
+  // 删除按钮权限
+  const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
+
+  // 删除按钮提示
+  const delTips =
+    hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
+
+  return (
+    <div style={{ width: colConf?.width, maxWidth: "100%" }}>
+      {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
+      {_hasDetail ? (
+        <Button
+          type="link"
+          onClick={() => {
+            onDetail && onDetail(record, index);
+          }}
+        >
+          {tableDetail}
+        </Button>
+      ) : null}
+      {_hasEdit ? (
+        <Button
+          type="link"
+          onClick={() => {
+            onEdit && onEdit(record, index);
+            if (editMode == "line") {
+              // 整行编辑，编辑按钮在操作列的模式下表单数据回填
+              return onEditByTable(record, record[idKey]);
+            }
+          }}
+        >
+          {tableEdit}
+        </Button>
+      ) : null}
+      {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
+      {_hasDel ? (
+        <Popconfirm
+          placement="topRight"
+          title={delTips}
+          onConfirm={() => {
+            onDel && onDel(record, index);
+          }}
+        >
+          <Button type="link" danger>
+            {tableDel}
+          </Button>
+        </Popconfirm>
+      ) : null}
+      {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
+    </div>
+  );
+}
+
+export default TableActions;

package/src/table-render/index.jsx

@@ -17,16 +17,12 @@ import { useEditTable } from "../components/Formily/FormilyEditTable";
 import { EditTableRow } from "../components/Formily/FormilyEditTable/EditTableRow";
 import { EditableCell } from "../components/Formily/FormilyEditTable/EditTableCell";
 import { TableFormilyContext } from "../components/Formily/FormilyEditTable/useTableFormilyContext";
+import TableActions from "./TableActions";
 
 import "./index.less";
 
 const scenario = "table-render";
 
-/**
- * 编辑按钮隐藏
- */
-const editModeHideList = ["cell", "line-cell", "table-line-show"];
-
 const TableRender = forwardRef(function (props, tableRef) {
   const { topProps, config = {}, query = {}, i18n, setList, schema } = props;
   const propsSchema = schema?.schema;
@@ -35,7 +31,7 @@ const TableRender = forwardRef(function (props, tableRef) {
     dragColConf = {},
     isDargTable,
     dargEndBack,
-    orderColType = "page",
+    orderColType,
     orderColWidth,
     tableEmptyValue,
     isShowTableFilter = false,
@@ -133,10 +129,7 @@ const TableRender = forwardRef(function (props, tableRef) {
     }
 
     const { Slots = {} } = props;
-    const _fieldList = handleReactions(fieldList, {
-      scope: props.schemaScope,
-      formilyRef,
-    });
+    const _fieldList = fieldList;
     _fieldList.forEach((field, colIndex) => {
       const fieldSchemas = formilyRef.current?.fields;
       if (!field["x-decorator-props"]) {
@@ -256,74 +249,23 @@ const TableRender = forwardRef(function (props, tableRef) {
         title: "操作",
         key: "_$actions",
         render: getColRender(function (text, record, index) {
-          const { onEdit, onDel, onSearch, getList } = props;
-          const slotProps = { text, record, index, onEdit: onEdit, onDel: onDel, onSearch, getList };
-
-          if (Slots?.tableActionsSlot) {
-            return <Slots.tableActionsSlot {...slotProps} />;
-          }
-
-          const { editMode = "modal" } = props.topProps || {};
-          // 编辑按钮权限
-          const _hasEdit =
-            !editModeHideList.includes(editMode) &&
-            (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
-
-          //详情按钮权限
-          const _hasDetail =
-            hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
-
-          //删除按钮权限
-          const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
-
-          //删除按钮提示
-          const delTips =
-            hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
-
-          return (
-            <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
-              {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
-              {_hasDetail ? (
-                <Button
-                  type="link"
-                  onClick={() => {
-                    props.onDetail && props.onDetail(record, index);
-                  }}
-                >
-                  {tableDetail}
-                </Button>
-              ) : null}
-              {_hasEdit ? (
-                <Button
-                  type="link"
-                  onClick={() => {
-                    props.onEdit && props.onEdit(record, index);
-                    if (editMode == "line") {
-                      // 整行编辑，编辑按钮在操作列的模式下表单数据回填
-                      return onEditByTable(record, record[props.idKey]);
-                    }
-                  }}
-                >
-                  {tableEdit}
-                </Button>
-              ) : null}
-              {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
-              {_hasDel ? (
-                <Popconfirm
-                  placement="topRight"
-                  title={delTips}
-                  onConfirm={() => {
-                    props.onDel && props.onDel(record, index);
-                  }}
-                >
-                  <Button type="link" danger>
-                    {tableDel}
-                  </Button>
-                </Popconfirm>
-              ) : null}
-              {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
-            </div>
-          );
+          const { onDetail, onEdit, onDel, onSearch, getList } = props;
+          const cProps = {
+            text,
+            record,
+            index,
+            Slots,
+            onEdit,
+            onDel,
+            onDetail,
+            onSearch,
+            onEditByTable,
+            getList,
+            tableConf: props.config,
+            colConf: _colConf,
+            topProps,
+          };
+          return <TableActions {...cProps} />;
         }),
       });
     }
@@ -364,8 +306,10 @@ const TableRender = forwardRef(function (props, tableRef) {
     scroll: config.scroll,
     expandable: config.expandable,
     loading: props.loading,
+    ...props.tableProps,
     onRow: (record, index) => {
-      const _onRowRes = config?.onRow && config?.onRow(record, index);
+      const _onRow = config?.onRow ?? props.tableProps?.onRow;
+      const _onRowRes = _onRow && _onRow(record, index);
       return {
         ..._onRowRes,
         record,
@@ -378,7 +322,6 @@ const TableRender = forwardRef(function (props, tableRef) {
       };
     },
     topProps: props.topProps,
-    ...props.tableProps,
   };
 
   tableProps.columns = mergedColumns;