@hzab/list-render 0.0.10 → 0.0.12

package/README.md

@@ -77,10 +77,82 @@ const listDM = useMemo(
 
 ## DataModel
 
+### Tips
+
+- 若存在 axios 相关配置失效的问题，请在选择一下任意一种方式解决；
+  - 在入口文件设置 DataModel 默认的 axios 为已配置好的 axios；
+  - 在入口文件对 DataModal 的 axios 进行配置;
+
+```js
+// 设置 DataModel 默认的 axios 为已配置好的 axios；
+import axios from "axios";
+import { setDefaultAxios } from "@hzab/list-render";
+
+setDefaultAxios(axios);
+```
+
+```js
+// 配置 DataModal 的 axios;
+import axios from "axios";
+import { axios as ax } from "@hzab/list-render";
+
+setAxRequest(axios);
+setAxRequest(ax);
+
+setAxResponse(axios);
+setAxResponse(ax);
+
+// axios 守卫
+export function setAxRequest(_ax) {
+  _ax.interceptors.request.use((config) => {
+    const { url = "" } = config;
+
+    if (/^\/api\/v\d+\/user\//.test(url)) {
+    } else if (url.startsWith("/api")) {
+      config.baseURL = cfg.businessApi;
+    }
+
+    return config;
+  });
+}
+
+// 请求到结果的拦截处理;
+export function setAxResponse(_ax) {
+  _ax.interceptors.response.use(
+    (res) => {
+      // const navigateApi = useNavigate()
+      // const locationApi = useLocation();
+      if (res.data.code == 401) {
+        message.error(res._message || "验证信息失效，请重新登录");
+        // TODO: 页面跳转
+        return res;
+      }
+      return res;
+    },
+    (error) => {
+      console.error("Error axios response: ", error);
+      message.error(error._message || "网络异常,请稍后再试");
+    },
+  );
+}
+
+export function setAxToken(_ax, token) {
+  _ax.defaults.headers.Authorization = token;
+}
+
+export function setAxiosToken(token) {
+  setAxToken(ax, token);
+  setAxToken(axios, token);
+}
+
+export default axios;
+```
+
 ### 使用
 
 ```js
-import DataModel from "@hzab/list-render/data-model";
+import { DataModel } from "@hzab/list-render";
+
 // 生成实例
 const dataModel = new DataModel({
   createApi: "api",
@@ -161,6 +233,13 @@ async function test() {
 - 发布目录：
   - lib
   - src
+  - example
+
+### 迭代发布命令
+
+- 0.0.x: npm run publish-patch
+- 0.x.0: npm run publish-minor
+- x.0.0: npm run publish-major
 
 ## 配置
 

package/example/app.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+import { HashRouter, useRoutes, useNavigate, useLocation } from "react-router-dom";
+import { syncRouter } from "@/components/anbao-router";
+
+import { Routes } from "./router";
+
+const Main = () => useRoutes(syncRouter(Routes));
+
+const App = () => {
+  return (
+    <>
+      <HashRouter>
+        <Main />
+      </HashRouter>
+    </>
+  );
+};
+
+export default App;

package/example/components/anbao-router/index.tsx

@@ -0,0 +1,47 @@
+import { Suspense, lazy } from "react";
+import { Navigate } from "react-router-dom";
+
+// 路由守卫方法
+const syncRouter = (routeList: any) => {
+  let RouteTable: any = [];
+  routeList.map((item: any) => {
+    const routeObj = { ...item };
+    if (routeObj.path === undefined) {
+      return;
+    }
+    if (routeObj.redirect) {
+      routeObj.element = <Navigate to={routeObj.redirect} replace={true} />;
+    }
+    if (routeObj.component) {
+      const Module = lazy(() => import("@/" + routeObj.component));
+      //TODO 页面loading
+      routeObj.element = (
+        <Suspense fallback={<></>}>
+          <Module />
+        </Suspense>
+      );
+    }
+    if (routeObj.children) {
+      routeObj.children = syncRouter(item.children);
+    }
+    RouteTable.push(routeObj);
+  });
+  return RouteTable;
+};
+
+// 判断用户权限
+const btnHasAuthority = (params: any) => {
+  let permission = false;
+  const userAuth = JSON.parse(window.sessionStorage.getItem("userAuthInfo") || "[]");
+  if (userAuth.indexOf(params) != -1) {
+    permission = true;
+  }
+  return permission;
+};
+
+// 按钮权限判断方法
+const Access: any = (props: any) => {
+  return props.accessible ? props.children : null;
+};
+
+export { syncRouter, btnHasAuthority, Access };

package/example/index.less

@@ -0,0 +1,3 @@
+@charset "utf-8";
+// 加载 antd 全局样式
+@import "~antd/dist/antd.less"; // 引入官方提供的 less 样式入口文件

package/example/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./app";
+
+import "./index.less";
+
+ReactDOM.createRoot(document.getElementById("root") as any).render(<App />);

package/example/pages/index/grid-empty.schema.json

@@ -0,0 +1,201 @@
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12,
+    "style": {
+      "backgroundColor": "rgba(255,255,255,1)",
+      "width": "inherit"
+    },
+    "wrapperWidth": "inherit",
+    "feedbackLayout": null,
+    "bordered": true
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      "06pny7e3bsi": {
+        "type": "void",
+        "x-component": "FormGrid",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-designable-id": "06pny7e3bsi",
+        "x-index": 0,
+        "properties": {
+          "hcczyqc3nth": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-designable-id": "hcczyqc3nth",
+            "x-index": 0,
+            "properties": {
+              "name": {
+                "type": "string",
+                "title": "部门",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": [],
+                "x-component-props": {
+                  "placeholder": "请输入"
+                },
+                "x-decorator-props": {
+                  "labelCol": null,
+                  "labelWidth": "100px",
+                  "wrapperWidth": "200px"
+                },
+                "x-designable-id": "bjdoighzdby",
+                "x-index": 0,
+                "name": "name"
+              }
+            }
+          },
+          "xpspz1ka2tc": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-designable-id": "xpspz1ka2tc",
+            "x-index": 1,
+            "properties": {
+              "phone": {
+                "type": "string",
+                "title": "部门电话",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": "number",
+                "x-component-props": {
+                  "placeholder": "请输入"
+                },
+                "x-decorator-props": {
+                  "labelCol": null,
+                  "labelWidth": "100px",
+                  "wrapperWidth": "200px"
+                },
+                "x-designable-id": "r1tiqra28bj",
+                "x-index": 0,
+                "name": "phone"
+              }
+            }
+          },
+          "zttstloy925": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-designable-id": "zttstloy925",
+            "x-index": 2,
+            "properties": {
+              "personCount": {
+                "type": "string",
+                "title": "部门人数",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": "number",
+                "x-component-props": {
+                  "placeholder": "请输入"
+                },
+                "x-decorator-props": {
+                  "labelCol": null,
+                  "labelWidth": "100px",
+                  "wrapperWidth": "200px"
+                },
+                "x-designable-id": "kkgj015gds0",
+                "x-index": 0,
+                "name": "personCount"
+              }
+            }
+          }
+        }
+      },
+      "huf62mybhch": {
+        "type": "void",
+        "x-component": "FormGrid",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-designable-id": "huf62mybhch",
+        "x-index": 1,
+        "properties": {
+          "y9qxn9ncxjn": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-designable-id": "y9qxn9ncxjn",
+            "x-index": 0,
+            "properties": {
+              "managerName": {
+                "type": "string",
+                "title": "负责人姓名",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": [],
+                "x-component-props": {
+                  "placeholder": "请输入"
+                },
+                "x-decorator-props": {
+                  "labelCol": null,
+                  "labelWidth": "100px",
+                  "wrapperWidth": "200px"
+                },
+                "x-designable-id": "sipvij59cy2",
+                "x-index": 0,
+                "name": "managerName"
+              }
+            }
+          },
+          "4y62v6gt28k": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-designable-id": "4y62v6gt28k",
+            "x-index": 1,
+            "properties": {
+              "managerPhone": {
+                "type": "string",
+                "title": "联系方式",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": "number",
+                "x-component-props": {
+                  "placeholder": "请输入"
+                },
+                "x-decorator-props": {
+                  "labelCol": null,
+                  "labelWidth": "100px",
+                  "wrapperWidth": "200px"
+                },
+                "x-designable-id": "plp3jrejyqe",
+                "x-index": 0,
+                "name": "managerPhone"
+              }
+            }
+          },
+          "1laypd415kh": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-validator": [],
+            "x-component-props": {},
+            "x-designable-id": "1laypd415kh",
+            "x-index": 2
+          }
+        }
+      },
+      "remark": {
+        "type": "string",
+        "title": "备注",
+        "x-decorator": "FormItem",
+        "x-component": "Input.TextArea",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {
+          "labelWidth": "100px"
+        },
+        "x-designable-id": "bu40azwavly",
+        "x-index": 2,
+        "name": "remark"
+      }
+    },
+    "x-designable-id": "7j5r2paneta"
+  }
+}

package/example/pages/index/grid.schema.json

@@ -0,0 +1,94 @@
+{
+  "form": {
+    "labelCol": 6,
+    "wrapperCol": 12
+  },
+  "schema": {
+    "type": "object",
+    "properties": {
+      "n021si0md2k": {
+        "type": "void",
+        "x-component": "FormGrid",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-designable-id": "n021si0md2k",
+        "x-index": 0,
+        "properties": {
+          "vtc56grqoq7": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-designable-id": "vtc56grqoq7",
+            "x-index": 0,
+            "properties": {
+              "a": {
+                "type": "string",
+                "title": "a",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": [],
+                "x-component-props": {},
+                "x-decorator-props": {},
+                "name": "a",
+                "x-designable-id": "ku66vyflkkq",
+                "x-index": 0
+              }
+            }
+          },
+          "hz6wmpqt5v9": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-designable-id": "hz6wmpqt5v9",
+            "x-index": 1,
+            "properties": {
+              "b": {
+                "type": "string",
+                "title": "b",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": [],
+                "x-component-props": {},
+                "x-decorator-props": {},
+                "name": "b",
+                "x-designable-id": "yxvv27p9cmm",
+                "x-index": 0
+              }
+            }
+          },
+          "5pzldy9jksd": {
+            "type": "void",
+            "x-component": "FormGrid.GridColumn",
+            "x-designable-id": "5pzldy9jksd",
+            "x-index": 2,
+            "properties": {
+              "c": {
+                "type": "string",
+                "title": "c",
+                "x-decorator": "FormItem",
+                "x-component": "Input",
+                "x-validator": [],
+                "x-component-props": {},
+                "x-decorator-props": {},
+                "name": "c",
+                "x-designable-id": "621l8qog1wn",
+                "x-index": 0
+              }
+            }
+          }
+        }
+      },
+      "createTime": {
+        "type": "string",
+        "title": "date",
+        "x-decorator": "FormItem",
+        "x-component": "DatePicker",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "name": "createTime",
+        "x-designable-id": "iuge27ui3t7",
+        "x-index": 1
+      }
+    },
+    "x-designable-id": "f0ub742w09r"
+  }
+}

package/example/pages/index/index.less

@@ -0,0 +1,5 @@
+.xindex{
+  width: 100%;
+  height: 100%;
+  background: #fff;
+}

package/example/pages/index/index.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useMemo } from "react";
+
+import ListRender, { DataModel } from "@hzab/list-render";
+
+import testSchema from "./test.schema.json";
+import gridSchema from "./grid.schema.json";
+
+import "./index.less";
+
+const Index: any = () => {
+  const listDM = useMemo(
+    () =>
+      new DataModel({
+        getListApi: "/api/v1/userinfo",
+        getListFunc(query) {
+          console.log("query", query);
+
+          return new Promise((resolve) => {
+            resolve({
+              list: [{ id: 1, menuName: "name", parentId: "parentId", a: "a", b: "b", createTime: Date.now() }],
+              pagination: { total: 1, current: 1 },
+            });
+          });
+        },
+        createApi: "/api/v1/userinfo",
+        getApi: "/api/v1/userinfo/:id",
+        updateApi: "/api/v1/userinfo/:id",
+        deleteApi: "/api/v1/userinfo/:id",
+      }),
+    [],
+  );
+
+  return (
+    <div className="index">
+      1
+      <ListRender
+        filters={["menuName"]}
+        model={listDM}
+        schema={testSchema}
+        fetchOnEdit={false}
+        schemaScope={{
+          fetchMenuTree(field) {
+            // field 目标组件的 配置参数
+            console.log("fetchMenuTree field", field);
+            // 通过 field.component[1] 可以动态配置目标组件的 props
+            console.log("fetchMenuTree field.component[1]", field.component[1]);
+            // 树选择器 数据源
+            field.component[1].treeData = [{ value: 1, label: 1 }];
+          },
+        }}
+      />
+      <ListRender
+        filters={["a"]}
+        model={listDM}
+        schema={gridSchema}
+        fetchOnEdit={false}
+        schemaScope={{
+          fetchMenuTree(field) {
+            // field 目标组件的 配置参数
+            console.log("fetchMenuTree field", field);
+            // 通过 field.component[1] 可以动态配置目标组件的 props
+            console.log("fetchMenuTree field.component[1]", field.component[1]);
+            // 树选择器 数据源
+            field.component[1].treeData = [{ value: 1, label: 1 }];
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default Index;