@hzab/list-render

@hzab/list-render

列表组件，支持传入 schema 进行 CURD 相关组件（列表、新增、编辑、删除）的渲染

• Schema JSON 配置项目：
  • https://codeup.aliyun.com/62046985b3ead41b374a17f7/frontedn_components/Formily/formily-designable-ui
  • clone 之后 npm i
  • npm run dev 启动项目，即可使用该项目进行 Schema JSON 的配置
  • 官方配置地址（配置响应器存在白屏 bug）：https://designable-antd.formilyjs.org/

组件

Tips

• antd 组件样式需要手动引入

示例

import ListRender from "@hzab/list-render";

const listDM = useMemo(
  () =>
    new DataModel({
      getListApi: "/api/v1/userinfo",
      // 可用于替代 getList 的函数，处理自定义数据
      getListFunc() {
        return new Promise((resolve) => {
          resolve({
            list: [{ id: 1, menuName: "name" }],
            pagination: { total: 1, current: 1 },
          });
        });
      },
      createApi: "/api/v1/userinfo",
      getApi: "/api/v1/userinfo/:id",
      updateApi: "/api/v1/userinfo/:id",
      deleteApi: "/api/v1/userinfo/:id",
    }),
  [],
);

// testSchema 为 formily 生成的 schema json
<ListRender schema={testSchema} model={listDM} />;

API

InfoPanel Attributes

属性名称	属性类型	必须	默认值	描述
schema	Object	是		字段描述文件，包含各个字段的信息
model	Object	是		数据模型，包含 CURD 接口信息，传入 DataModel 的实例
hasQuery	Boolean		true	是否包含搜索、筛选框、搜索按钮等
search	String			传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符
filters	Array		[]	字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用）
hasCreate	Boolean		true	是否显示新增按钮
hasAction	Boolean		true	是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 hasEdit/hasDel 才会生效
hasEdit	Boolean		true	是否显示编辑按钮
hasDel	Boolean		true	是否显示删除按钮
hasPagination	Boolean		true	是否显示分页
fetchOnEdit	Boolean		true	展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填
fetchById	Boolean		true	编辑中的详情请求，是否使用 id 作为入参的 key
components	Object		{}	自定义组件
formInitialValues	Object		{}	给新增、编辑对话框中的表单增加默认值
dialogConf	Object		{}	dialog 配置对象
tableConf	Object		{}	Table 相关配置
queryConf	Object		{}	设置 query 参数的 key
paginationConf	Object		{}	进行 pagination 相关设置

• fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填

tableConf

属性名称	属性类型	必须	默认值	描述
colConf	Object		{}	指定各列的参数（比如列宽），key 为字段的 name。可以指定名为 “_$actions”的字段来设置“操作”列
rowSelection	Object		{}
scroll	Object		{}
expandable	Object		{}
onRow	Object		{}

queryConf

属性名称	属性类型	必须	默认值	描述
hasReset	boolean		false	是否有重置按钮
queryMap	Function		-	query 数据提交前的处理函数

model

属性名称	属性类型	必须	默认值	描述
query	Object	否		get 请求参数

Table Methods

• 可使用 ref 获取并触发执行

函数名	参数	说明
onSearch		重置页码至 1，并刷新列表
getList		获取当前页列表数据
forceUpdate		强制重渲染列表，解决枚举数据渲染不正常的问题
formDialogRef		新增、编辑 弹窗 form-dialog 的 ref
queryRef		筛选条件 query-render 的 ref
onCreateSuc		新增成功回调
onEditSuc		编辑成功回调
onDelSuc		删除成功回调
onFormDialogClose		表单弹窗关闭回调
dialogFormMount		新增、编辑弹窗 Form 渲染完成回调

Schema

Schema Scope

编辑表单中才显示

• 属性响应中，显示/隐藏配置：scenario === 'edit'

{
  "form": {
    "labelCol": 6,
    "wrapperCol": 12,
    "wrapperWidth": "300px"
  },
  "schema": {
    "type": "object",
    "properties": {
      "4ud6mfo25gs": {
        "type": "string",
        "title": "Input",
        "x-decorator": "FormItem",
        "x-component": "Input",
        "x-validator": [],
        "x-component-props": {},
        "x-decorator-props": {},
        "x-reactions": {
          "dependencies": [
            {
              "property": "value",
              "type": "any"
            }
          ],
          "fulfill": {
            "state": {
              "visible": "{{scenario === 'edit'}}"
            }
          }
        },
        "x-designable-id": "4ud6mfo25gs",
        "x-index": 0
      }
    },
    "x-designable-id": "mqbipk44c0b"
  }
}

函数名	参数	说明
scenario		环境参数，当前表单的环境：create、edit、query

DataModel

Tips

• 若存在 axios 相关配置失效的问题，请在选择一下任意一种方式解决；
  • 在入口文件设置 DataModel 默认的 axios 为已配置好的 axios；
  • 在入口文件对 DataModal 的 axios 进行配置;

// 设置 DataModel 默认的 axios 为已配置好的 axios；
import axios from "axios";
import { setDefaultAxios } from "@hzab/list-render";

setDefaultAxios(axios);

// 配置 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;

使用

import { DataModel } from "@hzab/list-render";

// 生成实例
const dataModel = new DataModel({
  createApi: "api",
  createMap(data) {
    return data;
  },
  getApi: "api",
  getMap(res) {
    return res;
  },
  getListApi: "getListApi",
  getListMap(item) {
    return item;
  },
  updateApi: "updateApi",
  updateMap(data) {
    return data;
  },
  deleteApi: "deleteApi",
  multipleDeleteApi: "multipleDeleteApi",
  query: { pageNumber: 1, pageSize: 10 },
  axiosConfig: {
    timeout: 10000,
  },
});
// 调用方式
async function test() {
  const createRes = await dataModel.create();
  const getRes = await dataModel.get();
  const getListRes = await dataModel.getListApi();
  const updateRes = await dataModel.update();
  const deleteRes = await dataModel.delete();
  const multipleDeleteRes = await dataModel.multipleDelete();
}

属性 Props

属性名称	属性类型	必须	默认值	描述
createApi	String			post 请求的 api，dataModel.
createMap	Function			post 请求提交前的处理函数
getApi	String			get 请求的 api
getMap	Function			处理 get 返回结果，处理完需要把结果返回
getListApi	String			getList 获取列表的 api，返回列表数据和 pagination 数据
getListMap	Function			getList 结果 map 的回调函数，参数为结果每一项数据，处理完需要把结果返回
getListFunc	Function			可用于替代 getList 的函数，处理自定义数据，参数为 query
updateApi	String			put 请求的 api
updateMap	Function			put 请求提交前的处理函数
deleteApi	String			delete 请求的 api
multipleDeleteApi				批量删除请求的 api，使用的 axios({ method: 'DELETE' }) 发请求
query				get 请求的参数
axiosConfig	Object			axios 的配置项

组件开发流程

• 在 config/webpack.config/webpack.config.dev.js 中按需修改 alias 配置的包名，便于本地调试
• 在 src/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码
• lib 组件打包编译后的代码

命令

• 本地运行：npm run dev
• 测试环境打包编译：npm run build-flow-dev
• 生产环境打包编译：npm run build

发布

• 在 config/webpack.config/webpack.config.prod.js 中按需修改 entry 配置的文件名
• 编译组件：npm run build
• 命令：npm publish --access public
• 发布目录：
  • lib
  • src

迭代发布命令

• 0.0.x: npm run publish-patch
• 0.x.0: npm run publish-minor
• x.0.0: npm run publish-major

配置

配置文件

webpack 配置文件

• config/webpack.config.js