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

package/README.md

@@ -107,6 +107,16 @@ const listDM = useMemo(
 | onEditReqVerify             | Function                  | 否   | -                                      | 编辑态保存时额外的规则校验函数，返回 Promise 的 resolve 或 reject 用于继续执行或停止执行                                   |
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
+- editMode
+  - modal 弹窗/抽屉编辑;
+  - 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.19",
+  "version": "1.10.20-alpha.0",
   "description": "",
   "main": "src",
   "scripts": {
@@ -26,12 +26,12 @@
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
     "@hzab/data-model": "^1.7.4",
-    "@hzab/form-render": "^1.6.12",
+    "@hzab/form-render": "^1.7.12",
     "@hzab/formily-result-utils": "^1.2.0",
     "@hzab/permissions": "^1.0.0",
     "@hzab/schema-descriptions": "^1.3.0",
+    "@hzab/utils": "^1.0.16",
     "@hzab/webpack-config": "^0.7.2",
-    "@hzab/utils": "^1.0.7",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",

package/src/EditArrayTable/index.less

@@ -0,0 +1,11 @@
+.edit-array-table {
+  .edit-array-table-head {
+    display: flex;
+    justify-content: space-between;
+    .edit-array-table-actions {
+      .ant-btn + .ant-btn {
+        margin-left: 8px;
+      }
+    }
+  }
+}

package/src/EditArrayTable/index.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "react";
+import { Button } from "antd";
+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 SchemaToArrayTable from "../components/Formily/SchemaToArrayTable";
+
+import "./index.less";
+
+export interface IEditArrayTableProps {
+  topProps: {
+    editMode?: string;
+    fetchOnEdit?: boolean;
+    hasAction?: boolean;
+    hideMessage?: boolean;
+  };
+  config?: {
+    isDargTable?: boolean;
+    orderColType?: string;
+  };
+  schema: Schema;
+  list: Object[];
+  components: Object[];
+  schemaScope: Object;
+  getList: () => Promise<{ list: any[] }>;
+  onEditSubmit: (val) => void;
+  handleMessage: (msg) => void;
+  query: {
+    pageNum: number;
+    pageSize: number;
+  };
+}
+
+// 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 [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const formRef = useRef(null);
+  const preValRef = useRef(null);
+  const queryRef = useRef(props.query);
+
+  queryRef.current = query;
+
+  const schema = useMemo(() => {
+    const schemaToArrayTable = new SchemaToArrayTable({
+      schema: props.schema,
+      option: { hasAction, ...config },
+    });
+    return schemaToArrayTable.handleSchema();
+  }, [props.schema]);
+
+  const components = useMemo(() => {
+    return {
+      TableActions() {
+        return <div>TableActions</div>;
+      },
+      TableIndex() {
+        const index = useIndex();
+        // 序号列
+        if (orderColType === "page") {
+          return index + 1;
+        } else if (orderColType == "all") {
+          const { pageSize = 10, pageNum = 1 } = queryRef.current || {};
+          // 当前页数减1乘以每一页页数再加当前页序号+1
+          return (pageNum - 1) * pageSize + (index + 1);
+        }
+        return null;
+      },
+      ...props.components,
+    };
+  }, [props.components, props.query.pageNum, props.query.pageSize]);
+
+  useImperativeHandle(
+    parentRef,
+    () => ({
+      formRef,
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    if (formRef.current) {
+      setVal(props.list);
+    }
+  }, [props.list]);
+
+  function getVal() {
+    return cloneDeep(formRef.current.formRender.values.arrayTable);
+  }
+
+  function setVal(val) {
+    // formRef.current.formRender.reset();
+    formRef.current.formRender.setValues({
+      arrayTable: cloneDeep(val),
+    });
+  }
+
+  async function onEdit() {
+    setLoading(true);
+    if (topProps.fetchOnEdit !== false) {
+      // 获取当前列表最新数据
+      return getList()
+        .then((res) => {
+          handleEdit(res?.list);
+          return res;
+        })
+        .catch((err) => {
+          console.error("err", err);
+          handleMessage(err._message);
+          return Promise.reject(err);
+        });
+    } else {
+      const value = getVal();
+      handleEdit(value);
+      return Promise.resolve(value);
+    }
+  }
+
+  async function handleEdit(data) {
+    // cloneDeep 避免受影响
+    preValRef.current = cloneDeep(data);
+    setVal(data);
+    setEditing(true);
+    formRef.current.formRender.fields.arrayTable.readPretty = false;
+    setLoading(false);
+  }
+
+  async function onSubmit() {
+    setLoading(true);
+    try {
+      // 表单校验
+      await formRef.current?.formRender?.validate();
+      try {
+        await (props.onEditSubmit && props.onEditSubmit(getVal()));
+        onClose();
+      } catch (error) {}
+    } catch (error) {
+      console.error("Error validate: ", error);
+      !topProps.hideMessage && handleMessage("输入有误！");
+    }
+    setLoading(false);
+  }
+
+  function onClose() {
+    formRef.current.formRender.fields.arrayTable.readPretty = true;
+    setEditing(false);
+  }
+
+  function onCancel() {
+    onClose();
+    // 未提交，取消恢复原始数据
+    setVal(preValRef.current);
+  }
+
+  return (
+    <div className="edit-array-table">
+      <div className="edit-array-table-head">
+        <div></div>
+        <div className="edit-array-table-actions">
+          {editing ? (
+            <>
+              <Button className="edit-array-table-submit" type="primary" onClick={onSubmit} loading={loading}>
+                提交
+              </Button>
+              <Button className="edit-array-table-cancel" onClick={onCancel} loading={loading}>
+                取消
+              </Button>
+            </>
+          ) : (
+            <Button className="edit-array-table-edit" type="primary" onClick={onEdit} loading={loading}>
+              编辑
+            </Button>
+          )}
+        </div>
+      </div>
+      <FormRender
+        ref={formRef}
+        className="edit-array-table-form"
+        schema={schema}
+        components={components}
+        schemaScope={schemaScope}
+        initialValues={{}}
+        emptyValue={" "}
+        formOptions={{ readPretty: editMode !== "table-edit-show" }}
+      />
+    </div>
+  );
+});
+
+export default EditArrayTable;

package/src/components/Formily/{FormilyEditTable.tsx → --FormilyEditTable.tsx}

@@ -1,7 +1,9 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import React, { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Card, Slider, Rate, Form, Button } from "antd";
 import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
 import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
+
 import { cloneDeep } from "lodash";
 
 import { antdComponents, customComponents } from "@hzab/form-render";
@@ -13,6 +15,74 @@ export interface Item {
   address: string;
 }
 
+export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
+  SchemaField: any;
+  getField: () => {
+    type: string;
+    name: string;
+  };
+  editing: boolean;
+  dataIndex: string;
+  title: any;
+  inputType: "number" | "text";
+  record: Item;
+  index: number;
+  editable: boolean;
+  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
+  onSave: (field: { type: string; name: string }) => void;
+  onCancel: () => void;
+  topProps: {
+    config: { hasEdit: boolean | Function };
+    editMode: "modal" | "line" | "line-cell" | "cell";
+    formConf: any;
+  };
+  children: React.ReactNode;
+}
+
+export const EditableRow: React.FC<EditableRowProps> = ({
+  SchemaField,
+  getField,
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  onEdit,
+  onSave,
+  onCancel,
+  editable,
+  topProps,
+  children,
+  ...restProps
+}) => {
+  const { formConf = {} } = topProps || {};
+  const formRender = useMemo(
+    () =>
+      createForm({
+        initialValues: record,
+        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
+        readOnly: formConf.readOnly,
+        disabled: formConf.disabled,
+        ...(formConf.formOptions || {}),
+        effects(...args) {
+          formConf.onFormValuesChange && onFormValuesChange(formConf.onFormValuesChange);
+          formConf.onFieldValueChange && onFieldValueChange("*", formConf.onFieldValueChange);
+          formConf.formOptions?.effects && formConf.formOptions?.effects(...args);
+        },
+      }),
+    [],
+  );
+  // return <tr {...restProps}>{children}</tr>;
+  return (
+    <FormProvider form={formRender}>
+      <Form layout="vertical" component={false}>
+        <FormConsumer>{() => <tr {...restProps}>{children}</tr>}</FormConsumer>
+      </Form>
+    </FormProvider>
+  );
+};
+
 export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   SchemaField: any;
   getField: () => {
@@ -32,6 +102,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   topProps: {
     config: { hasEdit: boolean | Function };
     editMode: "modal" | "line" | "line-cell" | "cell";
+    isEditCell: (record) => boolean;
   };
   children: React.ReactNode;
 }
@@ -56,12 +127,12 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
-  const { editMode = "modal" } = topProps || {};
+  const { editMode = "modal", isEditCell } = topProps || {};
   const { hasEdit } = topProps?.config || {};
   const fieldRef = useRef();
 
   // 弹窗编辑模式
-  if (editMode === "modal") {
+  if (editMode === "modal" || (typeof isEditCell === "function" && !isEditCell(record))) {
     return <td {...restProps}>{children}</td>;
   }
   // 无编辑权限或禁止编辑

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

@@ -0,0 +1,157 @@
+import React, { useRef } from "react";
+import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import { useForm } from "@formily/react";
+
+import { Item, EditMode } from "./type";
+
+const submitHideList = ["line"];
+
+export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+  SchemaField: any;
+  getField: () => {
+    type: string;
+    name: string;
+    component: string;
+  };
+  editing: boolean;
+  dataIndex: string;
+  title: any;
+  inputType: "number" | "text";
+  record: Item;
+  index: number;
+  editable: boolean;
+  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
+  onEditSave: ({ field, id, dataIndex }) => void;
+  onCancel: () => void;
+  topProps: {
+    hasEdit: boolean | Function;
+    tableConf: { canEdit: Function };
+    editMode: EditMode;
+    idKey: "string";
+  };
+  components: any;
+  children: React.ReactNode;
+}
+
+export const EditableCell: React.FC<EditableCellProps> = ({
+  SchemaField,
+  getField,
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  onEdit,
+  onEditSave,
+  onCancel,
+  editable,
+  topProps,
+  children,
+  components,
+  ...restProps
+}) => {
+  const field = getField && getField();
+  const { idKey = "id", hasEdit, editMode = "modal" } = topProps || {};
+  const { canEdit } = topProps?.tableConf || {};
+
+  // 弹窗编辑模式
+  if (!field || (typeof canEdit === "function" && canEdit(record, { index, field }))) {
+    return <td {...restProps}>{children}</td>;
+  }
+
+  const name = field?.name;
+  const fieldRef = useRef();
+  const fPattern = field?.["x-pattern"];
+  const fDisplay = field?.["x-display"];
+  const display = field?.["x-display"];
+  const disabled = display === "none" || display === "hidden";
+
+  const id = record?.[idKey];
+  // 无编辑权限或禁止编辑
+  const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+  let _editable =
+    !disabled && _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
+  // 行内单元格编辑按钮
+  const showEditIcon = !editing && _editable && (editMode === "line-cell" || editMode === "cell");
+  const showSubmitIcon = !disabled && editing && !submitHideList.includes(editMode);
+
+  const editOpt = { index, field, fieldRef };
+
+  const form = useForm();
+  if (form.fields[name]) {
+    form.fields[name].pattern = disabled || !editing ? "readPretty" : field?.["x-pattern"] ?? "editable";
+  }
+
+  // 使用 Schema 渲染模式
+  return (
+    <td {...restProps}>
+      <div
+        className="editable-table-cell table-cell"
+        onDoubleClick={(e) => {
+          if (editMode == "modal") {
+            return;
+          }
+          if (editing) {
+            return;
+          }
+          e?.preventDefault();
+          e?.stopPropagation();
+          onEdit(record, dataIndex, editOpt);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault(); // 防止意外的表单提交
+            onEditSave && onEditSave({ field, id, dataIndex });
+          }
+        }}
+      >
+        <SchemaField
+          schema={{
+            type: "object",
+            properties: {
+              [name]: {
+                ...field,
+                title: "",
+                ["x-component-props"]: {
+                  ...field["x-component-props"],
+                  ref: (ref) => {
+                    if (field["x-component-props"] && typeof field["x-component-props"].ref === "function") {
+                      field["x-component-props"].ref(ref);
+                    }
+                    if (ref) {
+                      fieldRef.current = ref;
+                    }
+                  },
+                },
+                // 外部配置的禁用状态
+                "x-pattern": disabled || !editing ? "readPretty" : field?.["x-pattern"] ?? "editable",
+                // 外部配置的表单显隐状态，强制为 显示
+                "x-display": "visible",
+              },
+            },
+          }}
+        />
+        {showEditIcon ? (
+          <EditOutlined
+            className="table-cell-edit-icon"
+            onClick={(e) => {
+              e?.preventDefault();
+              e?.stopPropagation();
+              onEdit(record, dataIndex, editOpt);
+            }}
+          />
+        ) : null}
+        {showSubmitIcon ? (
+          <div className="cell-editing-actions">
+            <CheckOutlined
+              className="table-cell-confirm-icon"
+              onClick={() => onEditSave({ field, id: record[topProps.idKey || "id"], dataIndex })}
+            />
+            <CloseOutlined className="table-cell-cancel-icon" onClick={onCancel} />
+          </div>
+        ) : null}
+      </div>
+    </td>
+  );
+};

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

@@ -0,0 +1,71 @@
+import { memo, useMemo } from "react";
+import { Form } from "antd";
+import { createForm, onFormValuesChange, onFieldValueChange, Field } from "@formily/core";
+import { FormProvider, FormConsumer } from "@formily/react";
+import { PreviewText } from "c-formily-antd/lib/preview-text";
+
+import { Item, EditMode } from "./type";
+
+export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
+  rowFormMapRef;
+  editingInofRef;
+  record: Item;
+  editable: boolean;
+  disabled: boolean;
+  onEditSave;
+  topProps: {
+    config: { hasEdit: boolean | Function };
+    editMode: EditMode;
+    idKey: "string";
+    onFormValuesChange: (form: any) => void;
+    onFieldValueChange: (field, form: any) => void;
+    formOptions: {
+      effects;
+    };
+    tableConf: {
+      tableEmptyValue;
+    };
+  };
+  children: React.ReactNode;
+}
+
+export const EditTableRow: React.FC<EditableRowProps> = (props: EditableRowProps) => {
+  const { record, rowFormMapRef, editingInofRef, topProps, onEditSave, ...resetProps } = props;
+  const { idKey = "id", editMode } = topProps || {};
+  const rowId = props["data-row-key"];
+  const rowForm = useMemo(() => {
+    if (rowFormMapRef?.current?.get && rowFormMapRef.current.get(rowId)) {
+      // @ts-ignore
+      rowFormMapRef.current.get(rowId).readPretty = true;
+      return rowFormMapRef.current?.get(rowId);
+    }
+    const form = createForm({
+      initialValues: record,
+      // 只读模式，非编辑态默认为只读模式
+      readPretty: editingInofRef?.current?.editingRowId !== rowId,
+      ...(topProps?.formOptions || {}),
+      effects(...args) {
+        topProps?.onFormValuesChange && onFormValuesChange(topProps.onFormValuesChange);
+        onFieldValueChange("*", (field: Field, form) => {
+          topProps.onFieldValueChange && topProps.onFieldValueChange(field, form);
+        });
+        topProps?.formOptions?.effects && topProps.formOptions?.effects(...args);
+      },
+    });
+    if (rowFormMapRef) {
+      rowFormMapRef.current.set(rowId, form);
+    }
+    return form;
+  }, [record]);
+
+  return (
+    <FormProvider form={rowForm}>
+      {/* 传入空值展示的字符串 */}
+      <PreviewText.Placeholder value={topProps?.tableConf?.tableEmptyValue || " "}>
+        <Form layout="vertical" component={false}>
+          <FormConsumer>{() => <tr {...resetProps}>{props.children}</tr>}</FormConsumer>
+        </Form>
+      </PreviewText.Placeholder>
+    </FormProvider>
+  );
+};