@hzab/form-render 0.5.0 → 0.5.2

package/src/components/TreeCheckbox/common/utils.ts

@@ -11,7 +11,7 @@
       [ , 22,    ]
       [ , 23,    ]
  */
-export function handleDataSource(treeData = [], opt = {}) {
+export function handleDataSource(treeData = [], opt: optT = {}) {
   const { resList, maxCol } = transformTreeData(treeData, opt);
   resList.forEach((row) => {
     fillArrByPush(maxCol, row);
@@ -24,10 +24,13 @@ export type optT = {
   preCol?: number;
   // 最后一列是否合并到一个单元格
   mergeLast?: boolean;
-  // children Key
-  childrenKey?: string;
   // 当前递归的层级
   level?: number;
+  fieldNames?: {
+    value?: string;
+    label?: string;
+    children?: string;
+  };
 };
 
 /**
@@ -44,7 +47,8 @@ export type optT = {
       [ , 23,    ]
  */
 export function transformTreeData(treeData = [], opt: optT = {}) {
-  const { resList = [], preCol = 0, mergeLast, level = 0, childrenKey = "children" } = opt || {};
+  const { resList = [], preCol = 0, mergeLast, level = 0, fieldNames } = opt || {};
+  const { value = "value", children = "children", label = "label" } = fieldNames || {};
   let maxCol = preCol + 1;
   // 统计当前项包含的最大行数（当前项的行数等于所有子项行数之和），用于合并行的值
   let maxRow = 0;
@@ -52,14 +56,14 @@ export function transformTreeData(treeData = [], opt: optT = {}) {
   // 是否有子项
   let hasChildren = false;
   treeData.forEach((it) => {
-    if (it && Array.isArray(it[childrenKey]) && it[childrenKey].length > 0) {
+    if (it && Array.isArray(it[children]) && it[children].length > 0) {
       hasChildren = true;
     }
   });
   let lastRowIdx = resList.length > 0 ? resList.length - 1 : 0;
   // mergeLast === true && hasChildren === false && level > 0 时，合并当前数据
   if (mergeLast === true && !hasChildren && level > 0) {
-    resList[lastRowIdx].push([...treeData]);
+    resList[lastRowIdx].push([...treeData?.map((it) => ({ ...it, label: it[label], value: it[value] }))]);
     return {
       resList,
       maxCol,
@@ -69,9 +73,9 @@ export function transformTreeData(treeData = [], opt: optT = {}) {
   }
 
   treeData.forEach((it, i) => {
-    const item = { ...it };
-    const children = item[childrenKey] || [];
-    const childrenLen = children?.length;
+    const item = { ...it, value: it[value], label: it[label] };
+    const childList = item[children] || [];
+    const childLen = childList?.length;
     // 当 mergeLast !== true && children 长度大于1时，子项下标大于 0 的项需要另起一行，同时补充之前空的列。
     if (i > 0) {
       resList.push(fillArrByPush(preCol, [], { content: false }));
@@ -82,8 +86,8 @@ export function transformTreeData(treeData = [], opt: optT = {}) {
       resList[lastRowIdx] = [];
     }
     resList[lastRowIdx].push(item);
-    if (childrenLen > 0) {
-      const res = transformTreeData(children, {
+    if (childLen > 0) {
+      const res = transformTreeData(childList, {
         ...opt,
         resList,
         preCol: preCol + 1,
@@ -109,6 +113,13 @@ export function transformTreeData(treeData = [], opt: optT = {}) {
   };
 }
 
+/**
+ * 填充数组
+ * @param len
+ * @param arr
+ * @param opt
+ * @returns
+ */
 export function fillArrByPush(len, arr = [], opt: any = {}) {
   const { content } = opt || {};
   if (arr.length < len) {

package/src/components/TreeCheckbox/components/CheckboxTable/index.tsx

@@ -0,0 +1,55 @@
+import { Checkbox } from "antd";
+
+export const CheckboxTable = (props) => {
+  const { data } = props;
+  return (
+    <table className="tree-checkbox-table">
+      <tbody>
+        {data?.map((row, rowIdx) => {
+          return (
+            <tr className={`tree-checkbox-row tree-checkbox-row-${rowIdx}`} key={rowIdx}>
+              {row?.map((col, colIdx) => {
+                // 隐藏合并项
+                if (col === false) {
+                  return null;
+                }
+                // 注意：col 存在 undefined 的情况
+                const colKey = col?.value;
+                return (
+                  <td
+                    className={`tree-checkbox-col tree-checkbox-col-${colIdx}`}
+                    key={colIdx}
+                    rowSpan={col?._maxRow > 1 ? col?._maxRow : null}
+                  >
+                    {Array.isArray(col) ? (
+                      <>
+                        {col.map((it, itIdx) => {
+                          const itKey = (it?.value ?? "") + itIdx;
+                          return (
+                            it && (
+                              <Checkbox value={itKey} key={itKey}>
+                                {it.label}
+                              </Checkbox>
+                            )
+                          );
+                        })}
+                      </>
+                    ) : (
+                      col && (
+                        <Checkbox value={colKey} key={colKey}>
+                          {col.label}
+                        </Checkbox>
+                      )
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default CheckboxTable;

package/src/components/TreeCheckbox/index.tsx

@@ -1,9 +1,12 @@
 import { useMemo } from "react";
-import { Checkbox } from "antd";
+import { Checkbox, Tabs } from "antd";
 import { useField } from "@formily/react";
 
+import CheckboxTable from "./components/CheckboxTable";
 import { handleDataSource } from "./common/utils";
 
+const { TabPane } = Tabs;
+
 import "./index.less";
 
 export const TreeCheckbox = (props) => {
@@ -15,58 +18,49 @@ export const TreeCheckbox = (props) => {
     value,
     onChange,
     mergeLast = true,
-    labelKey = "label",
-    valueKey = "value",
-    childrenKey = "children",
+    fieldNames = {
+      // 兼容老的字段，后续废弃
+      label: props.labelKey ?? "label",
+      value: props.valueKey ?? "value",
+      children: props.childrenKey ?? "children",
+    },
+    // 最外层使用 tab
+    tabBox = false,
   } = props;
 
-  const showDataSource = useMemo(() => handleDataSource(dataSource, { mergeLast, childrenKey }), [dataSource]);
+  const showDataSource = useMemo(() => {
+    if (tabBox) {
+      return dataSource?.map((d) => {
+        return {
+          ...d,
+          tableData: handleDataSource(d?.[fieldNames?.children || "children"], { mergeLast, fieldNames }),
+        };
+      });
+    } else {
+      return handleDataSource(dataSource, { mergeLast, fieldNames });
+    }
+  }, [dataSource]);
+
+  let content = null;
+
+  if (tabBox) {
+    const { label: labelKey, value: valueKey } = fieldNames || {};
+    content = (
+      <Tabs defaultActiveKey="0">
+        {showDataSource?.map((it, i) => (
+          <TabPane tab={it[labelKey]} key={(valueKey || "") + i}>
+            <CheckboxTable data={it.tableData} />
+          </TabPane>
+        ))}
+      </Tabs>
+    );
+  } else {
+    content = <CheckboxTable data={showDataSource} />;
+  }
 
   return (
     <Checkbox.Group className="tree-checkbox" disabled={disabled || readOnly} value={value} onChange={onChange}>
-      <table className="tree-checkbox-table">
-        <tbody>
-          {showDataSource?.map((row, rowIdx) => {
-            return (
-              <tr className={`tree-checkbox-row tree-checkbox-row-${rowIdx}`} key={rowIdx}>
-                {row?.map((col, colIdx) => {
-                  // 隐藏合并项
-                  if (col === false) {
-                    return null;
-                  }
-                  return (
-                    <td
-                      className={`tree-checkbox-col tree-checkbox-col-${colIdx}`}
-                      key={colIdx}
-                      rowSpan={col?._maxRow > 1 ? col?._maxRow : null}
-                    >
-                      {Array.isArray(col) ? (
-                        <>
-                          {col.map((it) => {
-                            return (
-                              it && (
-                                <Checkbox value={it[valueKey]} key={it[valueKey]}>
-                                  {it[labelKey]}
-                                </Checkbox>
-                              )
-                            );
-                          })}
-                        </>
-                      ) : (
-                        col && (
-                          <Checkbox value={col[valueKey]} key={col[valueKey]}>
-                            {col[labelKey]}
-                          </Checkbox>
-                        )
-                      )}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+      {content}
     </Checkbox.Group>
   );
 };