@hzab/list-render 1.12.3-alpha.3 → 1.12.4

package/docs/form-linkage.md

@@ -0,0 +1,293 @@
+# 表单联动
+
+- 通过 配置响应器 实现
+
+#### 表单项显隐
+
+1. Schema JSON 配置页面
+2. 选中需要控制显隐的表单项
+3. 点击属性配置 -> 字段属性 -> 配置响应器
+4. 按需选择依赖字段 menuType（需要监听的字段，可根据该字段的值改变显隐状态）
+5. 属性响应器 -> 显示/隐藏 -> 输入框中输入 $deps.menuType === 'C' （$deps 表示表单中的字段，$deps.menuType 表示监听 menuType 表单项，如果 menuType 的值为 'C' 时展示当前表单项，否时隐藏当前表单项（perms））
+
+- test.schema.json
+
+```JSON
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      "menuType": {
+        "type": "string | number",
+        "title": "菜单类型",
+        "x-decorator": "FormItem",
+        "x-component": "Radio.Group",
+        "enum": [
+          {
+            "children": [],
+            "label": "目录",
+            "value": "M"
+          },
+          {
+            "children": [],
+            "label": "菜单",
+            "value": "C"
+          },
+          {
+            "children": [],
+            "label": "按钮",
+            "value": "F"
+          }
+        ],
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "name": "menuType",
+        "default": "M",
+        "x-designable-id": "5gkoosg4b2k",
+        "x-index": 0,
+        "inTable": false
+      },
+      "perms": {
+        "type": "string",
+        "title": "权限字符",
+        "x-decorator": "FormItem",
+        "x-component": "Input",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "name": "perms",
+        "required": true,
+        "x-designable-id": "xzy6veht5hc",
+        "x-index": 1,
+        "x-reactions": {
+          "dependencies": [
+            {
+              "property": "value",
+              "type": "string | number",
+              "source": "menuType",
+              "name": "menuType"
+            }
+          ],
+          "fulfill": {
+            "state": {
+              "visible": "{{$deps.menuType === \"C\"}}"
+            }
+          }
+        }
+      }
+    },
+    "x-designable-id": "ivyw5onkhz8"
+  }
+}
+```
+
+#### 表单项数据
+
+##### 根据其他表单项改变当前表单项数值
+
+```JSON
+{
+  "form": {},
+  "schema": {
+    "type": "object",
+    "properties": {
+      "test": {
+        "type": "string",
+        "title": "test",
+        "x-decorator": "FormItem",
+        "x-component": "Input",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-reactions": {},
+        "x-designable-id": "1zlm9bu3fpg",
+        "x-index": 0,
+        "name": "test",
+        "x-display": "visible"
+      },
+      "watch": {
+        "type": "string",
+        "title": "watch",
+        "x-decorator": "FormItem",
+        "x-component": "Input",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "name": "watch",
+        "x-reactions": {
+          "dependencies": [
+            {
+              "property": "value",
+              "type": "string",
+              "source": "test",
+              "name": "test"
+            }
+          ],
+          "fulfill": {
+            "state": {
+              "value": "{{$deps.test + 10}}"
+            }
+          }
+        },
+        "x-designable-id": "ri912mmvcz2",
+        "x-index": 1
+      }
+    },
+    "x-designable-id": "ldzb3lu81dx"
+  }
+}
+```
+
+##### 根据其他表单项改变当前 select 数据
+
+```JSX
+// RemoteData
+import listSchema from "./list.schema.json";
+
+const schemaScope = {
+  // 动态获取 select 数据
+  fetchSelectOptions(field, query) {
+    field.loading = true;
+    fetch(
+      `//some.domain/getSomething?test=${query.test}`
+    )
+      .then((response) => response.json())
+      .then(
+        ({ data }) => {
+          // field 目标组件的 配置参数
+          console.log("fetchSelectOptions field", field);
+          // 通过 select 可直接通过 field.dataSource 进行选项数据的配置
+          field.dataSource = data;
+          field.loading = false;
+        },
+        () => {
+          field.loading = false;
+        }
+      );
+  },
+  // 动态获取 treeSelect 数据
+  fetchMenuTree(field, query) {
+    field.loading = true;
+    fetch(
+      `//some.domain/getSomething?test=${query.test}`
+    )
+      .then((response) => response.json())
+      .then(
+        ({ data }) => {
+          // field 目标组件的 配置参数
+          console.log("fetchMenuTree field", field);
+          // 通过 field.component[1] 可以动态配置目标组件的 props
+          console.log("fetchMenuTree field.component[1]", field.component[1]);
+          // 树选择器 数据源，需要通过 field.component[1] 进行配置
+          field.component[1].treeData = data;
+          field.loading = false;
+        },
+        () => {
+          field.loading = false;
+        }
+      );
+  },
+};
+
+function RemoteData() {
+  const listDM = useMemo(
+    () =>
+      new DataModule({
+        getListApi: "/api/v1/user/list",
+        getApi: "/api/v1/user/list/:id",
+        createApi: "/api/v1/user/list",
+        updateApi: "/api/v1/user/list/:id",
+        deleteApi: "/api/v1/user/list/:id",
+      }),
+    []
+  );
+  return (
+    <ListRender model={listDM} schema={listSchema} schemaScope={schemaScope} />
+  );
+}
+
+export default RemoteData;
+
+```
+
+```JSON
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      "test": {
+        "type": "string",
+        "title": "test",
+        "x-decorator": "FormItem",
+        "x-component": "Input",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-reactions": {},
+        "x-designable-id": "1zlm9bu3fpg",
+        "x-index": 0,
+        "name": "test",
+        "x-display": "visible"
+      },
+      "watch": {
+        "title": "watch",
+        "x-decorator": "FormItem",
+        "x-component": "Select",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "name": "watch",
+        "x-designable-id": "jvjf7fkpke9",
+        "x-index": 1,
+        "x-reactions": {
+          "dependencies": [
+            {
+              "property": "value",
+              "type": "string",
+              "source": "test",
+              "name": "test"
+            }
+          ],
+          "fulfill": {
+            "run": "$effect(() => {\n  try {\n    fetchSelectOptions && fetchSelectOptions($self, { test: $deps.test })\n  } catch (e) {}\n}, [$deps.test])\n"
+          }
+        }
+      },
+      "treeSelect": {
+        "title": "TreeSelect",
+        "x-decorator": "FormItem",
+        "x-component": "TreeSelect",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-designable-id": "303l866v0lj",
+        "x-index": 2,
+        "name": "treeSelect",
+        "x-reactions": {
+          "dependencies": [
+            {
+              "property": "value",
+              "type": "string",
+              "source": "test",
+              "name": "test"
+            }
+          ],
+          "fulfill": {
+            "run": "$effect(() => {\r\n  try {\r\n    fetchMenuTree && fetchMenuTree($self, { test: $deps.test })\r\n  } catch (e) {}\r\n}, [$deps.test])\r\n"
+          }
+        }
+      }
+    },
+    "x-designable-id": "ldzb3lu81dx"
+  }
+}
+```

package/docs/remote-data.md

@@ -0,0 +1,124 @@
+# 远程数据源
+
+#### select 数据源
+
+- RemoteData.jsx
+
+```JSX
+// RemoteData
+import listSchema from "./list.schema.json";
+
+const schemaScope = {
+  // 动态获取 select 数据
+  fetchSelectOptions(field, query) {
+    field.loading = true;
+    fetch(
+      `//some.domain/getSomething?test=${query.test}`
+    )
+      .then((response) => response.json())
+      .then(
+        ({ data }) => {
+          // field 目标组件的 配置参数
+          console.log("fetchSelectOptions field", field);
+          // 通过 select 可直接通过 field.dataSource 进行选项数据的配置
+          field.dataSource = data;
+          field.loading = false;
+        },
+        () => {
+          field.loading = false;
+        }
+      );
+  },
+  // 动态获取 treeSelect 数据
+  fetchMenuTree(field, query) {
+    field.loading = true;
+    fetch(
+      `//some.domain/getSomething?test=${query.test}`
+    )
+      .then((response) => response.json())
+      .then(
+        ({ data }) => {
+          // field 目标组件的 配置参数
+          console.log("fetchMenuTree field", field);
+          // 通过 field.component[1] 可以动态配置目标组件的 props
+          console.log("fetchMenuTree field.component[1]", field.component[1]);
+          // 树选择器 数据源，需要通过 field.component[1] 进行配置
+          field.component[1].treeData = data;
+          field.loading = false;
+        },
+        () => {
+          field.loading = false;
+        }
+      );
+  },
+};
+
+function RemoteData() {
+  const listDM = useMemo(
+    () =>
+      new DataModule({
+        getListApi: "/api/v1/user/list",
+        getApi: "/api/v1/user/list/:id",
+        createApi: "/api/v1/user/list",
+        updateApi: "/api/v1/user/list/:id",
+        deleteApi: "/api/v1/user/list/:id",
+      }),
+    []
+  );
+  return (
+    <ListRender model={listDM} schema={listSchema} schemaScope={schemaScope} />
+  );
+}
+
+export default RemoteData;
+
+```
+
+- list.schema.json
+
+```JSON
+{
+  "form": {},
+  "schema": {
+    "type": "object",
+    "properties": {
+      "parentId": {
+        "type": "string",
+        "title": "上级菜单",
+        "x-decorator": "FormItem",
+        "x-component": "TreeSelect",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-reactions": {
+          "fulfill": {
+            "run": "try {fetchMenuTree && fetchMenuTree($self);}catch(e){}"
+          }
+        },
+        "name": "parentId",
+        "x-designable-id": "i012z5nbd5z",
+        "x-index": 0
+      },
+      "select": {
+        "title": "select",
+        "x-decorator": "FormItem",
+        "x-component": "Select",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "name": "select",
+        "x-designable-id": "jvjf7fkpke9",
+        "x-index": 1,
+        "x-reactions": {
+          "dependencies": [],
+          "fulfill": {
+            "run": "$effect(() => {\n  try {\n    fetchSelectOptions && fetchSelectOptions($self);\n  } catch (e) {}\n}, [])\n"
+          }
+        }
+      }
+    },
+    "x-designable-id": "ldzb3lu81dx"
+  }
+}
+
+```

package/docs/table.md

@@ -0,0 +1,86 @@
+# 表格相关
+
+## query 相关
+
+#### 设置过滤项
+
+```JSX
+<ListRender
+  schema={schema}
+  model={listDM}
+  // 字段为 search 的 query
+  search="模糊搜索"
+  // 传入 schema 中所需表单项的 name
+  filters={["userId"]}
+ />
+```
+
+#### 开启重置按钮
+
+```JSX
+<ListRender
+  schema={schema}
+  model={listDM}
+  // 字段为 search 的 query
+  search="模糊搜索"
+  // 传入 schema 中所需表单项的 name
+  filters={["userId"]}
+  queryConf={{
+    hasReset: true
+  }}
+ />
+```
+
+## 顶部操作栏（新增按钮附近）
+
+#### 新增按钮右侧添加其他组件
+
+- 使用 Slots 实现
+
+```JSX
+const Slots = {
+  headerActionSuffix() {
+    return (<div>headerActionPrefix</div>)
+  },
+};
+
+<ListRender schema={schema} model={listDM} Slots={Slots} />
+```
+
+## table 相关
+
+#### 手动发起请求
+
+```JSX
+
+// 手动发起请求
+useEffect(() => {
+  // 重置 pageNum 为1，并发起请求
+  listRef.current?.onSearch();
+  // 请求当前页数据
+  listRef.current?.getList();
+}, []);
+
+<ListRender
+  ref={listRef}
+  schema={schema}
+  model={listDM}
+  // 关闭自动发起请求
+  closeAutoRequest={false}
+ />
+```
+
+#### 编辑按钮左侧添加组件
+
+```JSX
+const Slots = {
+  actionPrefixSlot(props) {
+    const { text, record, index, onEdit, onDel } = props;
+    return (<div>actionPrefixSlot</div>)
+  },
+};
+
+<ListRender schema={schema} model={listDM} Slots={Slots} />
+```
+
+## 新增、编辑表单相关

package/package.json

@@ -1,77 +1,73 @@
-{
-  "name": "@hzab/list-render",
-  "version": "1.12.3-alpha.3",
-  "private": false,
-  "src-direct": true,
-  "type": "module",
-  "description": "列表与表格渲染",
-  "license": "ISC",
-  "author": "CaiYansong",
-  "engines": {
-    "node": ">=24"
-  },
-  "main": "src",
-  "files": [
-    "src",
-    "dist",
-    "docs",
-    "CHANGELOG.md"
-  ],
-  "sideEffects": [
-    "**/*.less"
-  ],
-  "peerDependencies": {
-    "@formily/core": ">=2.0.0",
-    "@formily/json-schema": ">=2.0.0",
-    "@formily/react": ">=2.0.0",
-    "@formily/reactive": ">=2.0.0",
-    "antd": ">=4.0.0",
-    "array-move": "^4.0.0",
-    "c-formily-antd": ">=2.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-sortable-hoc": ">=2.0.0"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^4.8.0",
-    "dayjs": "^1.11.7",
-    "lodash": "^4.17.21",
-    "@hzab/data-model": "^2.0.4",
-    "@hzab/form-render": "^1.7.18",
-    "@hzab/formily-result-utils": "^1.2.5",
-    "@hzab/utils": "^1.1.7",
-    "@hzab/edit-table": "^0.1.4",
-    "@hzab/schema-descriptions": "^1.3.3"
-  },
-  "devDependencies": {
-    "@ant-design/icons": "^4.8.0",
-    "@formily/core": "2.3.1",
-    "@formily/json-schema": "^2.3.1",
-    "@formily/reactive": "^2.3.1",
-    "@formily/react": "2.3.1",
-    "@types/lodash": "^4.17.12",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
-    "@vitest/coverage-v8": "4.1.10",
-    "antd": "^4.24.12",
-    "array-move": "^4.0.0",
-    "c-formily-antd": "^2.3.1",
-    "happy-dom": "^20.11.1",
-    "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-sortable-hoc": "^2.0.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.10",
-    "@hzab/typescript-config": "^0.0.0",
-    "@hzab/eslint-config": "^0.0.0",
-    "@hzab/vite-config": "^0.0.2-alpha.0"
-  },
-  "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
-    "typecheck": "tsc -p tsconfig.json",
-    "test": "vitest run --passWithNoTests",
-    "test:watch": "vitest"
-  }
-}
+{
+  "name": "@hzab/list-render",
+  "version": "1.12.4",
+  "description": "",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "version:alpha": "npm version prerelease --preid=alpha",
+    "publish:alpha": "npm publish --tag alpha",
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minior": "npm version minor",
+    "version:major": "npm version major",
+    "publish:stable": "npm publish --access public"
+  },
+  "files": [
+    "src",
+    "docs",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@ant-design/icons": "^4.8.1",
+    "@hzab/data-model": "^1.7.4",
+    "@hzab/form-render": "^1.6.12",
+    "@hzab/formily-result-utils": "^1.2.0",
+    "@hzab/permissions": "^1.0.0",
+    "@hzab/schema-descriptions": "^1.3.0",
+    "@hzab/utils": "^1.0.7",
+    "@hzab/webpack-config": "^0.7.2",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.24.12",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "lodash": "^4.17.21",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.8.1",
+    "typescript": "^4.9.4"
+  },
+  "peerDependencies": {
+    "@formily/core": "2.3.1",
+    "@formily/react": "2.3.1",
+    "@formily/reactive-react": "2.3.1",
+    "@hzab/data-model": ">=1.7.4",
+    "@hzab/form-render": ">=1.0.0",
+    "@hzab/formily-result-utils": ">=1.2.0",
+    "@hzab/schema-descriptions": ">=1.0.0",
+    "@hzab/utils": ">=1.0.7",
+    "antd": "4.x",
+    "axios": ">=1.4.0",
+    "c-formily-antd": "2.3.1",
+    "lodash": ">=4.17.21",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "@hzab/edit-table": ">=0.1.2"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "dependencies": {
+    "array-move": "^4.0.0",
+    "react-sortable-hoc": "^2.0.0"
+  }
+}

package/src/FilterTag/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import "./index.less";
 import { Tag } from "antd";
-import { getVal } from "@hzab/utils/src/formily/field";
+import { getVal } from "@hzab/list-render/src/common/utils";
 function hasValue(val) {
   return val !== null && val !== undefined;
 }
@@ -12,12 +12,13 @@ const FilterTag = (props: any) => {
     if (queryRef) {
       const list = [];
       const fieldSchemas = queryRef.current?.formRef?.current?.formRender?.fields;
-      for (const key in schema?.schema?.properties) {
+      for (let key in schema?.schema?.properties) {
         const field = schema?.schema?.properties[key];
         if (hasValue(searchQuery[key])) {
-          const val = getVal({ ...field, ...fieldSchemas[field?.name] }, searchQuery, {
+          let val = getVal({ ...field, ...fieldSchemas[field?.name] }, searchQuery, {
             fieldSchema: fieldSchemas?.[field?.name],
           });
+
           list.push({
             label: field?.title,
             value: val,
@@ -26,7 +27,7 @@ const FilterTag = (props: any) => {
           });
         }
       }
-      setWorldList(list);
+      setWorldList(list?.filter((el) => el?.value));
     }
   }, [searchQuery, schema, queryRef]);
   const onClose = (e, item) => {