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

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

@@ -0,0 +1,229 @@
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Card, Slider, Rate, 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 { Item, EditMode } from "./type";
+
+export const useEditTable = (props) => {
+  const { rowFormMapRef, editingInofRef, topProps, idKey, columns, onEditSubmit } = props;
+  const { editMode = "modal" } = topProps || {};
+  const preIdRef = useRef("");
+  const preIdxRef = useRef(null);
+  const preRecordRef = useRef({});
+
+  // 创建 formily 表单相关参数
+  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
+  const schemaScopeRef = useRef<{ _$tempData: Object }>();
+  if (props.schemaScope && !schemaScopeRef.current) {
+    schemaScopeRef.current = props.schemaScope;
+  } else if (!schemaScopeRef.current) {
+    schemaScopeRef.current = { _$tempData: {} };
+  }
+  if (!schemaScopeRef.current?._$tempData) {
+    schemaScopeRef.current._$tempData = {};
+  }
+
+  const components = {
+    // Upload,
+    Card,
+    Slider,
+    Rate,
+    ...antdComponents,
+    ...customComponents,
+    ...getFormilyGlobalComponents(),
+    ...props.components,
+  };
+
+  const SchemaField = useCallback(
+    createSchemaField({
+      components,
+      scope: {
+        scenario: "tableRowForm",
+        ...schemaScopeRef.current,
+      },
+    }),
+    [],
+  );
+
+  // 是否可编辑状态逻辑处理
+  const [editingId, setEditingId] = useState("");
+  // 当前编辑的字段
+  const [editingKey, setEditingKey] = useState("");
+  /** 判断当前 行 是否处于编辑状态 */
+  const isEditing = (record: Item) => record[idKey] === editingId;
+  /** 判断当前 单元格 是否处于编辑状态 */
+  const isEditingCell = (key) => key === editingKey;
+  const editingFiledRef = useRef(null);
+
+  //   useEffect(() => {
+  //     if (editingId || editingKey) {
+  //       // HACK: try catch 解决 select 等表单项 focus 报错问题
+  //       try {
+  //         // HACK: setTimeout 解决执行先后顺序导致无法正常获取 dom 问题
+  //         setTimeout(() => {
+  //           editingFiledRef.current?.current?.focus?.();
+  //         }, 0);
+  //       } catch (error) {}
+  //     }
+  //   }, [editingId, editingKey]);
+
+  /**
+   * 点击编辑按钮
+   * @param record
+   */
+  const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null, index: null }) => {
+    if (editMode == "modal") {
+      return;
+    }
+    const { fieldRef } = opt || {};
+    preRecordRef.current = record;
+    const id = record[idKey];
+    editingInofRef.current.editingRowId = id;
+    editingInofRef.current.editingKey = key;
+    const rowForm = rowFormMapRef.current.get(id);
+    rowForm.readPretty = false;
+    editingFiledRef.current = fieldRef;
+    rowForm.values = record;
+    rowForm?.setValues(record);
+    preIdRef.current = id;
+    preIdxRef.current = opt.index;
+    setEditingId(id);
+    setEditingKey(key);
+  };
+
+  /**
+   * 点击编辑按钮
+   * @param record
+   */
+  const onEditAFetch = async (record: Partial<Item> & { key: React.Key }, key, opt) => {
+    if (editMode == "modal") {
+      return;
+    }
+    const value = await (props.onEdit && props.onEdit(record));
+    preRecordRef.current = value;
+    preIdRef.current = record[idKey];
+    preIdxRef.current = opt.index;
+    onEdit.call(this, value, key, opt);
+  };
+
+  function onCancel() {
+    onReset();
+    setEditingId("");
+    setEditingKey("");
+    preRecordRef.current = {};
+    preIdRef.current = "";
+    editingFiledRef.current = null;
+  }
+
+  function onReset() {
+    const preRowForm = rowFormMapRef.current.get(preIdRef.current);
+    if (preRowForm) {
+      // disabled 后设置会导致 readPretty 设置失效
+      preRowForm.disabled = true;
+      preRowForm.readPretty = true;
+      // 取消数据重置为编辑前数据
+      preRowForm.reset();
+      preRowForm.values = preRecordRef.current;
+      preRecordRef.current = {};
+      editingInofRef.current.editingRowId = "";
+      editingInofRef.current.editingKey = "";
+    }
+  }
+
+  /**
+   * 保存数据
+   * field 当前编辑的项
+   * 当前数据的 id
+   */
+  const onEditSave = async ({ field, id, dataIndex }) => {
+    const rowForm = rowFormMapRef.current.get(id);
+    try {
+      // 点击保存，数据抛出
+      (await rowForm?.validate()) as Item;
+      onEditSubmit && (await onEditSubmit(rowForm.values, { field, id, dataIndex }));
+      // 清除编辑目标
+      setEditingId("");
+      setEditingKey("");
+      rowForm.disabled = true;
+      rowForm.readPretty = true;
+      onReset();
+    } catch (errInfo) {
+      console.error("Validate Failed:", errInfo);
+    }
+  };
+
+  const mergedColumns = cloneDeep(columns)?.map((col) => {
+    const isActions = col.key === "_$actions";
+    if (!col.editable && !isActions) {
+      return col;
+    }
+
+    const resCol = {
+      ...col,
+      onCell: (record: Item, ...args) => {
+        let editing = false;
+        if (editMode === "table-line-show") {
+          editing = true;
+        } else if (editMode === "cell") {
+          editing = isEditing(record) && isEditingCell(col.dataIndex);
+        } else {
+          editing = isEditing(record);
+        }
+        return {
+          ...(col.onCell ? col.onCell(record, ...args) : {}),
+          record,
+          components,
+          SchemaField,
+          // 函数获取解决 cloneDepp 报错问题
+          getField: col.getField,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          editable: col.editable,
+          editing,
+          topProps: props.topProps,
+          onEdit: onEditAFetch,
+          onEditSave,
+          onCancel,
+        };
+      },
+    };
+    // 操作列编辑态改成保存、取消按钮
+    if (isActions) {
+      resCol.render = (record, index) => {
+        // 编辑态操作栏变成保存和取消按钮
+        if (editMode === "line" && record[idKey] === editingId) {
+          return (
+            <div className="edit-table-actions">
+              <Button
+                type="link"
+                onClick={() => {
+                  onEditSave({ field: undefined, dataIndex: undefined, id: record[idKey] });
+                }}
+              >
+                保存
+              </Button>
+              <Button type="text" onClick={onCancel}>
+                取消
+              </Button>
+            </div>
+          );
+        }
+        return col.render(record, index);
+      };
+    }
+    return resCol;
+  });
+
+  return {
+    onEditAFetch,
+    onEdit,
+    onEditSave,
+    onEditCancel: onCancel,
+    SchemaField,
+    mergedColumns,
+  };
+};

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

@@ -0,0 +1,6 @@
+export interface Item {
+  id: string;
+  key: string;
+}
+
+export type EditMode = "modal" | "line" | "line-cell" | "cell" | "table-line-show";

package/src/components/Formily/FormilyEditTable/useTableFormilyContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+interface TableFormilyContextType {
+  rowFormMapRef;
+  editingInofRef;
+}
+
+// 创建行上下文
+export const TableFormilyContext = createContext<TableFormilyContextType | null>(null);
+
+export const useTableFormilyContext = () => {
+  const context = useContext(TableFormilyContext);
+  if (!context) {
+    throw new Error("useTableFormilyContext must be used within TableFormilyContext.Provider");
+  }
+  return context;
+};

package/src/components/Formily/SchemaToArrayTable.ts

@@ -0,0 +1,266 @@
+import { cloneDeep } from "lodash";
+import { nanoidNumALetters } from "@hzab/utils/src/nanoid";
+import { Schema } from "@formily/json-schema";
+
+/**
+ * 普通的 schema 表单字段转为自增表格的列
+ * @returns
+ */
+export class SchemaToArrayTable {
+  _schema: {
+    form: {};
+    schema: Schema;
+  };
+  option = {};
+  constructor(params) {
+    const { schema, option } = params || {};
+    this._schema = cloneDeep(schema);
+    this.option = option || {};
+  }
+  /**
+   * 处理 schema，把普通的 schema 表单字段转为自增表格的列
+   * @returns
+   */
+  handleSchema(schema = this._schema, opt?) {
+    const { isDargTable, hasAction } = opt || this.option;
+    const schemaTpl = this.getSchemaTpl();
+    const properties: Record<string, any> = {};
+    // schema 布局信息
+    schemaTpl.form = {
+      ...schema.form,
+    };
+
+    // 添加拖拽排序列
+    isDargTable && this.pushItem(properties, this.getSortTpl());
+    // 添加序号
+    isDargTable && this.pushItem(properties, this.getIndexTpl());
+    // 处理表单数据列
+    Object.keys(schema.schema?.properties).forEach((key, i) => {
+      const it = schema.schema?.properties[key];
+      // @ts-ignore
+      if (it.inTable === false) {
+        return;
+      }
+      this.pushItem(properties, this.handleCol(it));
+    });
+    // 添加操作列
+    hasAction !== false && this.pushItem(properties, this.getActionsTpl());
+    // 添加移动排序操作列
+    isDargTable && this.pushItem(properties, this.getMoveActionsTpl());
+
+    schemaTpl.schema.properties.arrayTable.items.properties = properties;
+    console.log("schemaTpl", schemaTpl);
+
+    return schemaTpl;
+  }
+  /**
+   * 处理列的数据
+   * @param {*} item
+   * @param {*} idx
+   * @returns
+   */
+  handleCol(item, idx = 0) {
+    const id = `${item.name}-${nanoidNumALetters()}`;
+    const _item = cloneDeep(item);
+    _item.title = "";
+    return {
+      type: "void",
+      "x-component": "ArrayTable.Column",
+      "x-component-props": {
+        title: item.title,
+      },
+      "x-designable-id": id,
+      name: id,
+      "x-index": idx,
+      properties: {
+        [item.name]: _item,
+      },
+    };
+  }
+  /**
+   * 在 properties 中指定序号添加一项
+   * @param {*} properties
+   * @param {*} item
+   * @param {*} idx
+   */
+  addItem(properties, item, idx) {
+    // 数组存放实际顺序
+    const arr = [];
+    // 获取当前排序的数组
+    Object.keys(properties).forEach((key) => {
+      const it = properties[key];
+      arr[it["x-index"]] = it;
+    });
+    // 在指定位置添加项
+    arr.splice(idx, 0, item);
+    // 根据数组顺序更新源数据
+    arr.forEach((it) => {
+      properties[it.name] = it;
+    });
+    return properties;
+  }
+  /**
+   * 在 properties 中添加一项
+   * @param {*} properties
+   * @param {*} item
+   */
+  pushItem(properties, item) {
+    properties[item.name] = cloneDeep(item);
+    properties[item.name]["x-index"] = Object.keys(properties).length - 1;
+    return properties;
+  }
+  sortItems() {}
+  /**
+   * 获取 schema 模板字符串
+   * @returns
+   */
+  getSchemaTpl() {
+    return {
+      form: {},
+      schema: {
+        type: "object",
+        properties: {
+          arrayTable: {
+            type: "array",
+            "x-decorator": "FormItem",
+            "x-component": "ArrayTable",
+            "x-validator": [],
+            "x-component-props": {
+              pagination: false,
+              onSortStart() {
+                console.log("onSortStart");
+              },
+              onSortEnd() {
+                console.log("onSortEnd");
+              },
+            },
+            "x-decorator-props": {},
+            "x-designable-id": "arrayTable",
+            "x-index": 0,
+            items: {
+              type: "object",
+              "x-designable-id": "gbmerqeme8g",
+              properties: {
+                // 自增表格列
+              },
+            },
+            // 新增按钮
+            properties: {
+              // cs1marpxdon: {
+              //   type: "void",
+              //   title: "Addition",
+              //   "x-component": "ArrayTable.Addition",
+              //   "x-designable-id": "cs1marpxdon",
+              //   "x-index": 0,
+              // },
+            },
+          },
+        },
+        "x-designable-id": "un3pxnx4ong",
+      },
+    };
+  }
+  /**
+   * 获取排序列模板字符串
+   * @returns
+   */
+  getSortTpl() {
+    return {
+      name: "sort",
+      type: "void",
+      "x-component": "ArrayTable.Column",
+      "x-component-props": {
+        title: "",
+      },
+      "x-designable-id": "l3z7t4ff7zw",
+      "x-index": 0,
+      properties: {
+        g0cxfnsnevh: {
+          type: "void",
+          "x-component": "ArrayTable.SortHandle",
+          "x-designable-id": "g0cxfnsnevh",
+          "x-index": 0,
+        },
+      },
+    };
+  }
+  getIndexTpl() {
+    return {
+      name: "index",
+      type: "void",
+      "x-component": "ArrayTable.Column",
+      "x-component-props": {
+        title: "序号",
+      },
+      "x-designable-id": "4ps6b3ut7ft",
+      properties: {
+        TableIndex: {
+          type: "void",
+          "x-component": "TableIndex",
+          "x-designable-id": "TableIndex",
+          "x-index": 0,
+        },
+      },
+    };
+  }
+  /**
+   * 获取操作列模板字符串
+   * @returns
+   */
+  getActionsTpl() {
+    return {
+      name: "actions",
+      type: "void",
+      "x-component": "ArrayTable.Column",
+      "x-component-props": {
+        title: "操作",
+      },
+      "x-designable-id": "actions",
+      properties: {
+        tableActions: {
+          type: "void",
+          "x-component": "TableActions",
+          "x-designable-id": "tableActions",
+          "x-index": 0,
+        },
+      },
+    };
+  }
+  /**
+   * 获取移动排序操作列模板字符串
+   * @returns
+   */
+  getMoveActionsTpl() {
+    return {
+      name: "move-actions",
+      type: "void",
+      "x-component": "ArrayTable.Column",
+      "x-component-props": {
+        title: "",
+      },
+      "x-designable-id": "move-actions",
+      properties: {
+        xynjkn08lvp: {
+          type: "void",
+          "x-component": "ArrayTable.Remove",
+          "x-designable-id": "xynjkn08lvp",
+          "x-index": 0,
+        },
+        gvl20uo8m8q: {
+          type: "void",
+          "x-component": "ArrayTable.MoveDown",
+          "x-designable-id": "gvl20uo8m8q",
+          "x-index": 1,
+        },
+        "4c8wbndejhy": {
+          type: "void",
+          "x-component": "ArrayTable.MoveUp",
+          "x-designable-id": "4c8wbndejhy",
+          "x-index": 2,
+        },
+      },
+    };
+  }
+}
+
+export default SchemaToArrayTable;

package/src/list-render.jsx

@@ -10,6 +10,7 @@ import axiosI, { isCancel, getCancelTokenSource } from "@hzab/data-model/src/axi
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
 import TableRender from "./table-render";
+import EditArrayTable from "./EditArrayTable";
 import CardRender from "./card-render";
 import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
@@ -202,6 +203,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           setTotal(res.pagination?.total);
           props.onGetListEnd && props.onGetListEnd(res);
           setListLoading(false);
+          return res;
         })
         .catch((err) => {
           // 兼容新老版本 data-model isCancel 取法
@@ -454,6 +456,9 @@ const ListRender = forwardRef(function (props, parentRef) {
     setShowSearch(!showSearch);
   };
 
+  const CTableRender =
+    props.editMode === "table-edit" || props.editMode === "table-edit-show" ? EditArrayTable : TableRender;
+
   return (
     <div className={`list-render ${props.className}`}>
       <div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
@@ -516,10 +521,10 @@ const ListRender = forwardRef(function (props, parentRef) {
       ) : null}
 
       {layout === "default" ? (
-        <TableRender
+        <CTableRender
           idKey={idKey}
           ref={tableRef}
-          schema={schema?.schema}
+          schema={schema}
           list={list}
           config={props.tableConf}
           hasAction={props.hasAction}
@@ -540,6 +545,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           i18n={i18n}
           onEditSubmit={onEditSubmit}
           topProps={props}
+          handleMessage={handleMessage}
         />
       ) : null}