@hzab/list-render 0.1.3 → 0.1.4

package/docs/remote-data.md

@@ -6,34 +6,67 @@
 
 ```JSX
 // RemoteData
-
 import listSchema from "./list.schema.json";
 
 const 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 }];
+  // 动态获取 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",
-  })), []);
+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}
-      />
+    <ListRender model={listDM} schema={listSchema} schemaScope={schemaScope} />
   );
 }
 
@@ -65,9 +98,26 @@ export default RemoteData;
         "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": "ivyw5onkhz8"
+    "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/lib/data-model.js

@@ -1 +1 @@
-import _ from"lodash";import axios from"axios";const _$Temp={};class DataModel{constructor(t){const{ctx:e,query:s,createApi:i,createMap:a,getApi:r,getMap:o,getListApi:n,getListMap:h,getListFunc:p,updateApi:l,updateMap:c,deleteApi:d,multipleDeleteApi:g,axios:u,axiosConf:m}=t;this.ctx=e||{},this.query=s||{},this.axios=u||_$Temp.axios||axios,this.axiosConf=m||{},this.createApi=i,this.createMap=a,this.getApi=r,this.getMap=o,this.getListApi=n,this.getListMap=h,this.getListFunc=p,this.updateApi=l,this.updateMap=c,this.deleteApi=d,this.multipleDeleteApi=g}getApiUrl(t,e,s=this.ctx){if(!t)throw new Error("Error api 不能为空",t,e,s);let i=t;const a=_.merge({},e,s);return _.each(a,((t,e)=>{_.isString(t)&&_.isNumber(t)&&!_.isBoolean(t)||(i=i.replace(`:${e}`,t))})),i}get(t={},e={}){let s=_.merge({},this.query,t);return s=_.pickBy(s,(t=>!_.isNil(t)&&""!==t)),new Promise(((t,i)=>{const a=this.getApiUrl(this.getApi,s,e);this.axios.get(a,{...this.axiosConf,params:s}).then((e=>{this.handleRes(e,(e=>{this.getMap&&(e=this.getMap(e)),t(e)}),i)})).catch((t=>this.errorHandler(t,i)))}))}async getList(t,e){let s=_.merge({},this.query,t);s=_.pickBy(s,(t=>!_.isNil(t)&&""!==t));let i=null;if(this.getListFunc)i=await this.getListFunc(s);else{const a=new Promise(((i,a)=>{const r=this.getApiUrl(this.getListApi,t,e);this.axios.get(r,{...this.axiosConf,params:s}).then((t=>{this.handleRes(t,(t=>{this.getListMap&&(t.list=t.list.map((t=>this.getListMap(t)))),i(t)}),a)})).catch((t=>this.errorHandler(t,a)))}));i=await a}return i}create(t,e){return new Promise(((s,i)=>{const a=this.getApiUrl(this.createApi,t,e),r={...this.axiosConf};t instanceof FormData&&(r.headers={"Content-Type":"multipart/form-data"}),this.axios.post(a,t,r).then((t=>{this.handleRes(t,s,i)})).catch((t=>this.errorHandler(t,i)))}))}update(t,e){return new Promise(((s,i)=>{const a=this.getApiUrl(this.updateApi,t,e),r={...this.axiosConf};t instanceof FormData&&(r.headers={"Content-Type":"multipart/form-data"}),this.axios.put(a,t,r).then((t=>{this.handleRes(t,s,i)})).catch((t=>this.errorHandler(t,i)))}))}delete(t,e){return new Promise(((s,i)=>{const a=this.getApiUrl(this.deleteApi,t,e);this.axios.delete(a,{...this.axiosConf,...t}).then((t=>{this.handleRes(t,s,i)})).catch((t=>this.errorHandler(t,i)))}))}multipleDelete(t,e){return new Promise(((s,i)=>{const a=this.getApiUrl(this.multipleDeleteApi,t,e);this.axios.delete(a,{...this.axiosConf,...t}).then((t=>{this.handleRes(t,s,i)})).catch((t=>this.errorHandler(t,i)))}))}handleRes(t,e,s){if("object"!=typeof t)return void s(new Error("response not object"));let i=t;i.data&&i.headers&&i.request&&"number"==typeof i.data?.code&&(i=i.data);const{code:a,message:r,data:o,msg:n}=i;if(200===a){let t=o??{};_.isObject(t)&&void 0===t.message&&(t._message=r||n),e(t)}else{const e=new Error(r||n);e.code=a,e.response=t,e._message=r||n,s(e)}}errorHandler(t,e){const s=t.response||t;if(s){const t=s.data&&(s.data.message||s.data.msg)||s.msg,i=new Error(t||s.statusText||"未知错误");return i.code=s.status,i.response=s,t&&(i._message=t),e(i)}return e(t)}}function setDefaultAxios(t){t&&(_$Temp.axios=t)}export{axios,DataModel,setDefaultAxios};export default DataModel;
+export*from"@hzab/data-model";import DataModel from"@hzab/data-model";export default DataModel;