@hzab/list-render v1.6.0

@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 组件样式需要手动引入
• 相关文档可查看 docs 中的文件

示例

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

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

tableConf

tableConf.colConfxxx

queryConf

model

i18n

Slots 插槽

• 用于在指定位置添加所需的组件

// Slots 按需添加
const Slots = {
  headerActionPrefix() {
    return (<div>headerActionPrefix</div>)
  },
  actionPrefixSlot(props) {
    const { text, record, index, onEdit, onDel } = props;
    return (<div>actionPrefixSlot</div>)
  },
  dialogFooterPre(props) {
    const {
      cancel,
      onOk,
      close,
      form,
      validate,
    } = props?.options || {};
    return (<div>dialogFooterPre</div>)
  }
};

<ListRender schema={schema} model={listDM} Slots={Slots} />

dialogConf

paginationConf

• 默认参数参考 antd pagination 组件

getFieldListOpt

Table ref Methods

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

Schema

• 字段文档：https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F

Schema Scope

• 用于传入参数给到响应器使用

常用示例

字段显隐 x-display

• visible: 显示（默认状态）
• hidden: 半隐藏。字段可赋值，可监听，但表单项隐藏
• none: 全隐藏。字段完全不可用。

{
  "form": {
    "labelCol": 6,
    "wrapperCol": 12
  },
  "schema": {
    "type": "object",
    "properties": {
      "test": {
        "type": "string",
        "title": "Input",
        "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": "none"
      }
    },
    "x-designable-id": "ldzb3lu81dx"
  }
}

字段在表格中隐藏 inTable

• true: 在表格中展示（默认）
• false: 在表格中隐藏

{
  "form": {},
  "schema": {
    "type": "object",
    "properties": {
      "test": {
        "type": "string",
        "title": "Input",
        "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",
        "inTable": false
      }
    },
    "x-designable-id": "ldzb3lu81dx"
  }
}

字段动态显隐——响应器

编辑表单中才显示

• 通过 scenario 获取当前表单环境变量
• 属性响应中，显示/隐藏配置：scenario === 'edit'

{
  "form": {},
  "schema": {
    "type": "object",
    "properties": {
      "test": {
        "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": {
              //当涉及三层及以上的时，请使用 display，3依赖于2,2依赖于1时，编辑设置值时，3依赖于2的赋值，不会捕捉到
              // 例："display": "{{$deps.hasECert === 1  ? \"visible\" : \"hidden\"}}"
              "visible": "{{scenario === 'edit'}}"
            }
          }
        },
        "x-designable-id": "1zlm9bu3fpg",
        "x-index": 0,
        "name": "test"
      }
    },
    "x-designable-id": "ldzb3lu81dx"
  }
}

响应器中可用的参数

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 },
  axiosConf: {
    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

组件开发流程

• 在 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