@hzab/list-render 1.8.1 → 1.8.3-beta1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# @hzab/list-render@1.9.0
+
+feat: 列表渲染支持 tag 模式、前缀 Node （前缀圆点）
+feat: Switch 渲染模式优化，使用 前缀 Node （前缀圆点）
+feat: 新增、编辑、详情弹窗支持抽屉模式
+
+# @hzab/list-render@1.8.2
+
+fix: query schema props scope 模式问题修复
+fix: query allowClear 允许外部配置
+
 # @hzab/list-render@1.6.2
 
 fix: 监听 model query 更改

package/README.md

@@ -74,9 +74,11 @@ const listDM = useMemo(
 | tableProps                  | Object           |      | {}              | 直接传给 Table 的 props，相关 API 可直接参考 antd table 组件                                             |
 | fetchOnEdit                 | Boolean          |      | true            | 展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填  |
 | fetchById                   | Boolean          |      | true            | 编辑中的详情请求，是否使用 id 作为入参的 key                                                             |
-| dialogConf                  | Object           |      | {}              | dialog 配置对象                                                                                          |
-| dialogDetailProps           | Object           |      | {}              | dialog descriptions 配置对象                                                                             |
-| dialogFormProps             | Object           |      | {}              | dialog fromRender 配置对象                                                                               |
+| modalMode                   | string           |      | dialog          | 新增/编辑表单、详情 展示模式： dialog drawer                                                             |
+| modalConf                   | Object           |      | {}              | modal/Drawer 配置对象                                                                                    |
+| modalDetailProps            | Object           |      | {}              | modal descriptions 配置对象                                                                              |
+| modalFormProps              | Object           |      | {}              | modal/drawer fromRender 配置对象                                                                         |
+| modalProps                  | Object           |      | {}              | modal/drawer 配置对象                                                                                    |
 | schemaScope                 | Object           |      | {}              | formRender schemaScope props                                                                             |
 | components                  | Object           |      | {}              | formRender components props 自定义组件                                                                   |
 | detailComponents            | Object           |      | {}              | descriptions components props 自定义组件                                                                 |
@@ -89,28 +91,29 @@ const listDM = useMemo(
 | onCreateSuc                 | Function         |      | -               | 新增成功返回的回调                                                                                       |
 | onEditSuc                   | Function         |      | -               | 编辑成功返回的回调                                                                                       |
 | onDelSuc                    | Function         |      | -               | 删除成功返回的回调                                                                                       |
-| onFormDialogClose           | Function         |      | -               | 表单弹窗关闭回调                                                                                         |
-| dialogFormMount             | Function         |      | -               | 新增、编辑弹窗 Form 渲染完成回调                                                                         |
+| onFormModalClose            | Function         |      | -               | 表单弹窗关闭回调                                                                                         |
+| modalFormMount              | Function         |      | -               | 新增、编辑弹窗 Form 渲染完成回调                                                                         |
 | msgConf                     | Object           |      | {}              | 新增、编辑、删除、列表查询，详情查询的报错 msg 提示设置                                                  |
 | i18n                        | Object           |      | {}              | 文案配置                                                                                                 |
 | queryFormInitialValues      | Object           |      | {}              | 列表上方查询 Form 默认值                                                                                 |
 | queryFormIsExtendModelQuery | Boolean          |      | false           | 列表上方查询 Form 默认值是否继承 data-model.query 置                                                     |
+| useFormData                 | boolean          | 否   |                 | 是否使用 form data 提交数据                                                                              |
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
 
 #### tableConf
 
-| 属性名称        | 属性类型      | 必须 | 默认值    | 描述                                                                                         |
-| --------------- | ------------- | ---- | --------- | -------------------------------------------------------------------------------------------- |
-| colConf         | Object        |      | {}        | 指定各列的配置（比如列宽），key 为字段的 name。可以指定名为 “\_$actions”的字段来设置“操作”列 |
-| rowSelection    | Object        |      | {}        | 选择功能的配置。参考 antd table rowSelection 参数                                            |
-| scroll          | Object        |      | {}        | 表格是否可滚动，也可以指定滚动区域的宽、高。参考 antd table scroll 参数                      |
-| expandable      | Object        |      | {}        | 配置展开属性。参考 antd table expandable 参数                                                |
-| onRow           | Object        |      | {}        | 设置行属性。参考 antd table onRow 参数                                                       |
-| orderColType    | string        |      | -         | 序号列数据类型：page（按当前页的序号）、all（按所有页的序号）                                |
-| orderColWidth   | string/number |      | -         | 序号列 width 的参数                                                                          |
-| tableEmptyValue | string/number |      | undefined | table 列表空值展示数                                                                         |
-| isTableSortXIdex | Boolean |      | undefined | table 列表列排序是否按照 x-index 排序                                                                         |
+| 属性名称         | 属性类型      | 必须 | 默认值    | 描述                                                                                         |
+| ---------------- | ------------- | ---- | --------- | -------------------------------------------------------------------------------------------- |
+| colConf          | Object        |      | {}        | 指定各列的配置（比如列宽），key 为字段的 name。可以指定名为 “\_$actions”的字段来设置“操作”列 |
+| rowSelection     | Object        |      | {}        | 选择功能的配置。参考 antd table rowSelection 参数                                            |
+| scroll           | Object        |      | {}        | 表格是否可滚动，也可以指定滚动区域的宽、高。参考 antd table scroll 参数                      |
+| expandable       | Object        |      | {}        | 配置展开属性。参考 antd table expandable 参数                                                |
+| onRow            | Object        |      | {}        | 设置行属性。参考 antd table onRow 参数                                                       |
+| orderColType     | string        |      | -         | 序号列数据类型：page（按当前页的序号）、all（按所有页的序号）                                |
+| orderColWidth    | string/number |      | -         | 序号列 width 的参数                                                                          |
+| tableEmptyValue  | string/number |      | undefined | table 列表空值展示数                                                                         |
+| isTableSortXIdex | Boolean       |      | undefined | table 列表列排序是否按照 x-index 排序                                                        |
 
 ##### tableConf.colConf[xxx]
 
@@ -159,7 +162,7 @@ const listDM = useMemo(
 | ------------------ | -------- | ---- | ------ | ------------------------------------ |
 | headerActionPrefix | Function | 否   |        | 新增按钮左侧插槽                     |
 | headerActionSuffix | Function | 否   |        | 新增按钮右侧插槽                     |
-| HeaderOthersSuffix | Function | 否   |        | 表格和搜索项之间的插槽                     |
+| HeaderOthersSuffix | Function | 否   |        | 表格和搜索项之间的插槽               |
 | tableActionsSlot   | Function | 否   |        | 操作列插槽，会覆盖操作列             |
 | actionPrefixSlot   | Function | 否   |        | 操作列 编辑按钮左侧插槽              |
 | actionCenterSlot   | Function | 否   |        | 操作列 编辑、删除按钮中间插槽        |
@@ -203,7 +206,6 @@ const Slots = {
 | cancelText   | string        | 否   |        | 弹窗底部取消按钮文案                                |
 | footer       | Array         | 否   |        | 自定义弹窗底部按钮                                  |
 | beforeSubmit | Function      | 否   |        | 提交前的回调， return false; 表示拦截，不进行请求。 |
-| useFormData  | boolean       | 否   |        | 是否使用 form data 提交数据                         |
 
 #### paginationConf
 
@@ -223,16 +225,16 @@ const Slots = {
 
 - 可使用 ref 获取并触发执行
 
-| 函数名        | 参数  | 说明                                         |
-| ------------- | ----- | -------------------------------------------- |
-| onSearch      | query | 重置页码至 1，并刷新列表                     |
-| getList       | query | 获取当前页列表数据                           |
-| forceUpdate   | -     | 强制重渲染列表，解决枚举数据渲染不正常的问题 |
-| formDialogRef | -     | 新增、编辑 弹窗 form-dialog 的 ref           |
-| queryRef      | -     | 筛选条件 query-render 的 ref                 |
-| onCreate      | -     | 手动触发新增按钮相关操作                     |
-| onEdit        | row   | 手动触发编辑按钮相关操作                     |
-| onDel         | row   | 手动触发删除按钮相关操作                     |
+| 函数名       | 参数  | 说明                                         |
+| ------------ | ----- | -------------------------------------------- |
+| onSearch     | query | 重置页码至 1，并刷新列表                     |
+| getList      | query | 获取当前页列表数据                           |
+| forceUpdate  | -     | 强制重渲染列表，解决枚举数据渲染不正常的问题 |
+| formModalRef | -     | 新增、编辑 弹窗 form-modal 的 ref            |
+| queryRef     | -     | 筛选条件 query-render 的 ref                 |
+| onCreate     | -     | 手动触发新增按钮相关操作                     |
+| onEdit       | row   | 手动触发编辑按钮相关操作                     |
+| onDel        | row   | 手动触发删除按钮相关操作                     |
 
 # Schema
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.8.1",
+  "version": "1.8.3-beta1",
   "description": "",
   "main": "src",
   "scripts": {
@@ -20,10 +20,10 @@
   "license": "ISC",
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
-    "@hzab/data-model": "^1.5.0",
+    "@hzab/data-model": "^1.6.0",
     "@hzab/form-render": "^1.1.5",
     "@hzab/schema-descriptions": "^1.0.0",
-    "@hzab/webpack-config": "0.0.12",
+    "@hzab/webpack-config": "^0.7.2",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",

package/src/DetailModal/index.jsx

@@ -0,0 +1,112 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+
+import { Modal, Drawer, Button } from "antd";
+import Descriptions from "@hzab/schema-descriptions";
+
+import "./index.less";
+
+let _formData = null;
+
+function DetailModal(props, parentRef) {
+  const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState({});
+  const formRef = useRef();
+  function show(formData = props.formInitialValues) {
+    setOpen(true);
+    // 处理 formRef.current 为 undefined 的问题
+    setData(formData);
+  }
+
+  function close() {
+    props.onClose && props.onClose();
+    setOpen(false);
+    formRef.current?.formRender?.reset();
+  }
+
+  useImperativeHandle(parentRef, () => ({
+    show,
+    close,
+    cancel: close,
+    formRef,
+  }));
+
+  let footer = undefined;
+  const options = {
+    close,
+    form: formRef.current?.formRender,
+    scenario: "detail",
+  };
+  if (modalConf?.footer) {
+    footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
+  } else {
+    footer = [];
+
+    if (Slots.modalFooterPre) {
+      footer.push(<Slots.modalFooterPre key="pre" options={options} />);
+    }
+
+    footer.push(
+      <Button key="confirm" onClick={close}>
+        {modalConf.okText || "关 闭"}
+      </Button>,
+    );
+
+    if (Slots.modalFooterSuffix) {
+      footer.push(<Slots.modalFooterSuffix key="suffix" options={options} />);
+    }
+  }
+
+  /**
+   * 解决 show 函数中 formRef.current 为 undefined 的问题
+   */
+  function didMount() {
+    props.modalFormMount && props.modalFormMount();
+    if (_formData) {
+      setData(_formData);
+      _formData = null;
+    }
+  }
+
+  const CModal = modalMode === "drawer" ? Drawer : Modal;
+  const _modalProps = {
+    className: "detail-modal",
+    wrapClassName: "detail-modal",
+    title: "详情",
+    visible: open,
+    open: open,
+    onClose: close,
+    onCancel: close,
+    footer: footer,
+    maskClosable: modalProps.maskClosable || false,
+    width: modalConf?.width ?? 720,
+    // 解决弹窗不销毁，表单远程数据没有更新的问题
+    destroyOnClose: true,
+    ...modalProps,
+  };
+
+  return (
+    <CModal {..._modalProps}>
+      <Descriptions
+        {...props.detailProps}
+        components={props.components}
+        schema={props.schema}
+        schemaScope={{
+          scenario: "detail",
+          ...(props.schemaScope || {}),
+        }}
+        data={data}
+      />
+      <DidMount didMount={didMount} />
+    </CModal>
+  );
+}
+
+function DidMount(props) {
+  useEffect(() => {
+    props.didMount();
+  }, []);
+  return null;
+}
+
+export default forwardRef(DetailModal);

package/src/DetailModal/index.less

@@ -0,0 +1,2 @@
+.detail-modal {
+}

package/src/FormModal/index.less

@@ -0,0 +1,8 @@
+.form-modal {
+  .ant-drawer-footer,
+  ant-modal-footer {
+    .ant-btn + .ant-btn {
+      margin-left: 12px;
+    }
+  }
+}

package/src/{form-dialog/index.jsx → FormModal/index.tsx}

@@ -1,6 +1,7 @@
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useMemo } from "react";
+import _ from "lodash";
 
-import { Modal, Button, message } from "antd";
+import { Modal, Drawer, Button, message } from "antd";
 
 import FormRender from "@hzab/form-render";
 
@@ -8,13 +9,29 @@ import "./index.less";
 
 let _formData = null;
 
-function FormDialog(props, parentRef) {
-  const { Slots = {}, dialogConf = {}, modalProps = {} } = props;
+export interface IFormRender {
+  setValues: Function;
+  reset: Function;
+  validate: Function;
+  values: Object;
+}
+export interface IFormRef {
+  formRender: IFormRender;
+}
+
+/**
+ * 表单弹层，包含弹窗、抽屉两种模式
+ * @param props
+ * @param parentRef
+ * @returns
+ */
+export function FormModal(props, parentRef) {
+  const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
   const [loading, setLoading] = useState(false);
   const [title, setTitle] = useState("新增");
   const [scenario, setScenario] = useState("create");
   const [open, setOpen] = useState(false);
-  const formRef = useRef();
+  const formRef = useRef<IFormRef>();
 
   const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
 
@@ -48,8 +65,8 @@ function FormDialog(props, parentRef) {
   function onOk() {
     validate().then(async () => {
       const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
-      if (dialogConf.beforeSubmit) {
-        const isContinue = await dialogConf.beforeSubmit(submitForm, {
+      if (modalConf.beforeSubmit) {
+        const isContinue = await modalConf.beforeSubmit(submitForm, {
           cancel: close,
           formRef,
           scenario,
@@ -74,7 +91,7 @@ function FormDialog(props, parentRef) {
    * 校验表单
    * @returns
    */
-  function validate(hideMessage) {
+  function validate(hideMessage = false) {
     return new Promise((resolve, reject) => {
       formRef.current?.formRender
         ?.validate()
@@ -98,33 +115,33 @@ function FormDialog(props, parentRef) {
     validate,
     scenario,
   };
-  if (dialogConf?.footer) {
-    footer = typeof dialogConf?.footer === "function" ? dialogConf.footer({ ...options, options }) : dialogConf?.footer;
+  if (modalConf?.footer) {
+    footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
   } else {
     footer = [];
 
-    if (Slots.dialogFooterPre) {
-      footer.push(<Slots.dialogFooterPre key="pre" options={options} />);
+    if (Slots.modalFooterPre) {
+      footer.push(<Slots.modalFooterPre key="pre" options={options} />);
     }
 
     footer.push(
       <Button key="cancel" onClick={close}>
-        {dialogConf.cancelText || "取 消"}
+        {modalConf.cancelText || "取 消"}
       </Button>,
     );
 
-    if (Slots.dialogFooterCenter) {
-      footer.push(<Slots.dialogFooterCenter key="center" options={options} />);
+    if (Slots.modalFooterCenter) {
+      footer.push(<Slots.modalFooterCenter key="center" options={options} />);
     }
 
     footer.push(
       <Button key="confirm" type="primary" onClick={onOk} loading={loading}>
-        {dialogConf.okText || "确 定"}
+        {modalConf.okText || "确 定"}
       </Button>,
     );
 
-    if (Slots.dialogFooterSuffix) {
-      footer.push(<Slots.dialogFooterSuffix key="suffix" options={options} />);
+    if (Slots.modalFooterSuffix) {
+      footer.push(<Slots.modalFooterSuffix key="suffix" options={options} />);
     }
   }
 
@@ -132,27 +149,33 @@ function FormDialog(props, parentRef) {
    * 解决 show 函数中 formRef.current 为 undefined 的问题
    */
   function didMount() {
-    props.dialogFormMount && props.dialogFormMount();
+    props.modalFormMount && props.modalFormMount();
     if (_formData) {
       formRef.current?.formRender?.setValues(_formData);
       _formData = null;
     }
   }
 
+  const CModal = modalMode === "drawer" ? Drawer : Modal;
+  const _modalProps = {
+    className: "form-modal",
+    wrapClassName: "form-modal",
+    title: title,
+    visible: open,
+    open: open,
+    onClose: close,
+    onCancel: close,
+    onOk: onOk,
+    footer: footer,
+    maskClosable: modalProps.maskClosable || false,
+    width: modalConf?.width ?? 720,
+    // 解决弹窗不销毁，表单远程数据没有更新的问题
+    destroyOnClose: true,
+    ...modalProps,
+  };
+
   return (
-    <Modal
-      wrapClassName="form-dialog"
-      title={title}
-      visible={open}
-      onCancel={close}
-      onOk={onOk}
-      footer={footer}
-      {...modalProps}
-      maskClosable={modalProps.maskClosable || false}
-      width={dialogConf?.width}
-      // 解决弹窗不销毁，表单远程数据没有更新的问题
-      destroyOnClose
-    >
+    <CModal {..._modalProps}>
       {FormSlot ? (
         <FormSlot {...props} ref={formRef} scenario={scenario} schema={props.schema?.schema} />
       ) : (
@@ -168,7 +191,7 @@ function FormDialog(props, parentRef) {
         ></FormRender>
       )}
       <DidMount didMount={didMount} />
-    </Modal>
+    </CModal>
   );
 }
 
@@ -179,4 +202,4 @@ function DidMount(props) {
   return null;
 }
 
-export default forwardRef(FormDialog);
+export default forwardRef(FormModal);

package/src/common/handleQuerySchema.ts

@@ -1,7 +1,8 @@
+import _ from "lodash";
 import { getFieldMap } from "./utils";
 
 export const handleQuerySchema = (opt) => {
-  const { schema, search, filters, onSearch, replaceComList } = opt || {};
+  const { schema, search, filters, onSearch, replaceComList, schemaScope } = opt || {};
   const queryProperties = {};
   let index = 0;
   if (search) {
@@ -10,13 +11,13 @@ export const handleQuerySchema = (opt) => {
     index += 1;
   }
 
-  const fieldMap = getFieldMap(schema);
+  const fieldMap = getFieldMap(_.cloneDeep(schema));
   filters?.forEach((key) => {
     const item = fieldMap[key];
     if (item) {
       const xComponent = item["x-component"];
       const replaceItem = replaceComList?.find((it) => it.name === key || (!it.name && it.component === xComponent));
-      // TODO: 优化
+
       const itemConf = {
         ...item,
         ...replaceItem,
@@ -25,11 +26,17 @@ export const handleQuerySchema = (opt) => {
         "x-display": "visible",
       };
 
-      if (!itemConf["x-component-props"]) {
+      // 处理 props 不存在、从 scope 中获取的情况
+      const comProps = itemConf["x-component-props"];
+      if (!comProps) {
         itemConf["x-component-props"] = {};
+      } else if (isScopeKey(comProps)) {
+        itemConf["x-component-props"] = getValByScope(comProps, schemaScope) || {};
       }
 
-      itemConf["x-component-props"].allowClear = true;
+      if (typeof itemConf["x-component-props"].allowClear !== "boolean") {
+        itemConf["x-component-props"].allowClear = true;
+      }
 
       handleInput(itemConf, opt);
       handleSelect(itemConf, opt);
@@ -173,7 +180,7 @@ export const handleShortcutSubmit = (conf, opt) => {
 
   // 输入框
   if (isEnterSubmit && xComponent === "Input") {
-    const onPressEnter = xComponentProps?.onPressEnter;
+    const onPressEnter = getSchemaVal(xComponentProps?.onPressEnter, opt);
     conf["x-component-props"].onPressEnter = function (e, ...args) {
       e?.preventDefault && e?.preventDefault();
       // 阻止默认事件，解决单个 input 提交问题
@@ -184,12 +191,12 @@ export const handleShortcutSubmit = (conf, opt) => {
     // 清除事件
     handleInputClear(conf, opt);
   } else if (isChangeSubmit && onChangeList.includes(xComponent)) {
-    conf["x-component-props"].onChange = handleHoc(xComponentProps?.onChange, onSearch);
+    conf["x-component-props"].onChange = handleHoc(xComponentProps?.onChange, onSearch, opt);
   }
   // 处理自定义组件快捷提交逻辑
   const item = customSubmitList?.find((it) => it.component === xComponent);
   if (item) {
-    conf["x-component-props"][item.event] = handleHoc(xComponentProps[item.event], onSearch);
+    conf["x-component-props"][item.event] = handleHoc(xComponentProps[item.event], onSearch, opt);
   }
 };
 
@@ -199,11 +206,14 @@ export const handleShortcutSubmit = (conf, opt) => {
  * @param cb
  * @returns
  */
-export const handleHoc = (source, cb) => {
+export const handleHoc = (source, cb, opt) => {
   return async function (...args) {
+    const { schemaScope } = opt;
+    let _source = getSchemaVal(source, schemaScope);
+
     let res = null;
-    if (source) {
-      res = await source(...args);
+    if (_source) {
+      res = await _source(...args);
     }
     cb && cb(...args);
     return res;
@@ -217,8 +227,8 @@ export const handleHoc = (source, cb) => {
  * @returns
  */
 export const handleInputClear = (conf, opt) => {
-  const { onSearch } = opt || {};
-  const onChange = conf["x-component-props"]?.onChange;
+  const { onSearch, schemaScope } = opt || {};
+  const onChange = getSchemaVal(conf["x-component-props"]?.onChange, schemaScope);
   conf["x-component-props"].onChange = function (e, ...args) {
     const res = onChange && onChange(e, ...args);
     if (e.type === "click" && e.target?.value === "") {
@@ -229,4 +239,56 @@ export const handleInputClear = (conf, opt) => {
   return conf;
 };
 
+/**
+ * 是否是 scope key
+ * @param strKey
+ * @returns
+ */
+export const isScopeKey = (strKey) => {
+  if (typeof strKey !== "string") {
+    return false;
+  }
+  const key = strKey.trim();
+  return key.startsWith("{{") && key.endsWith("}}");
+};
+
+/**
+ * 获取 scope key
+ * @param strKey
+ * @returns
+ */
+export const getScopeKey = (strKey) => {
+  if (!isScopeKey(strKey)) {
+    return "";
+  }
+  const key = strKey.trim();
+  return key.replace(/^\{\{/, "").replace(/\}\}$/, "");
+};
+
+/**
+ * 通过字符串获取 schemaScope 中的数据
+ * @param strKey
+ * @param schemaScope
+ * @returns
+ */
+export const getSchemaVal = (strKey, schemaScope = {}) => {
+  const val = getValByScope(strKey, schemaScope);
+  if (!_.isNil(val) && val !== "") {
+    return val;
+  }
+  return strKey;
+};
+
+/**
+ * 通过字符串获取 schemaScope 中的数据
+ * @param strKey
+ * @param schemaScope
+ * @returns
+ */
+export const getValByScope = (strKey, schemaScope = {}) => {
+  if (isScopeKey(strKey)) {
+    return schemaScope && schemaScope[getScopeKey(strKey)];
+  }
+};
+
 export default handleQuerySchema;

package/src/common/utils.js

@@ -1,3 +1,4 @@
+import { Schema } from "@formily/json-schema";
 import _ from "lodash";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
@@ -23,8 +24,9 @@ const dateFormatEnum = {
  * @returns
  */
 export function getVal(field = {}, data = {}, opt = {}) {
+  const {} = opt;
   let val = _.get(data, field.name);
-  const { } = field || {};
+  const {} = field || {};
   const xComponent = field["x-component"];
   const xComponentProps = field["x-component-props"] || {};
 
@@ -89,9 +91,11 @@ export function getDateVal(val, format) {
   return dayjs(val).format(format);
 }
 
-export function getFieldList(_schema, fieldList = [], opt = {},isTableSortXIdex = false) {
+export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex = false) {
   const schema = _schema?.schema || _schema;
 
+  // 解决 schema 字符串可执行代码、变量等
+  const properties = Schema.getOrderProperties(schema);
   const { boxList = [] } = opt || {};
   let _boxList = ["FormGrid", "FormGrid.GridColumn", "Card"];
   if (Array.isArray(boxList)) {
@@ -101,10 +105,10 @@ export function getFieldList(_schema, fieldList = [], opt = {},isTableSortXIdex
   }
 
   schema?.properties &&
-    Object.keys(schema?.properties).forEach((key) => {
-      const field = schema?.properties[key];
+    properties.forEach((item) => {
+      const field = item.schema;
       if (!field.name) {
-        field.name = key;
+        field.name = item.key;
       }
       const componentName = field["x-component"];
       if (_boxList.includes(componentName)) {
@@ -142,3 +146,53 @@ export function objToFormData(data) {
   });
   return formData;
 }
+
+/**
+ * 根据 val 获取对应的 options 项数据
+ * @param {string|number|boolean} val
+ * @param {Object} field
+ */
+export const getFieldOptItByVal = function (val, field, opt) {
+  if (!field) {
+    return {};
+  }
+  const options = Array.isArray(field.enum)
+    ? field.enum
+    : Array.isArray(field.options)
+    ? field.options
+    : field.dataSource || [];
+  return getOptItByVal(val, options, { fieldNames: field.fieldNames, ...opt });
+};
+
+/**
+ * 根据 val 获取对应的 options 项数据，并进行数据归一化处理
+ * value, label, children
+ * @param {string|number|boolean} val
+ * @param {Object} field
+ */
+export const getOptItByVal = function (val, options, opt) {
+  const { fieldNames } = opt || {};
+  const { value = "value", label = "label", children = "children" } = fieldNames || {};
+  for (let i = 0; i < options.length; i++) {
+    const it = options[i];
+    if (it?.[value] === val) {
+      return {
+        ...it,
+        value: it?.[value],
+        label: it?.[label],
+        children: it?.[children],
+      };
+    }
+    // 递归处理
+    const _children = it?.[children];
+    if (Array.isArray(_children) && _children.length > 0) {
+      const child = getOptItByVal(val, _children, opt);
+      return {
+        ...child,
+        value: child?.[value],
+        label: child?.[label],
+        children: child?.[children],
+      };
+    }
+  }
+};

package/src/components/PrefixNode/index.less

@@ -0,0 +1,9 @@
+.table-cell-prefix-box {
+  .prefix-node {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+  }
+}

package/src/components/PrefixNode/index.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+import _ from "lodash";
+
+import { getFieldOptItByVal } from "../../common/utils";
+
+import "./index.less";
+
+export interface IPrefixNodeProps {
+  showPrefixNode?: boolean | Object;
+  value: any;
+  field?: Object;
+}
+
+export interface ITagOption {
+  value: string | number | boolean;
+  label: string | number;
+  children?: [ITagOption];
+  color: string;
+  icon: ReactNode | string;
+}
+
+export const defaultSwitchEnum = [
+  {
+    value: true,
+    label: "是",
+    color: "#00b42a",
+  },
+  {
+    value: false,
+    label: "否",
+    color: "#c9cdd4",
+  },
+];
+
+export const PrefixNode = (props) => {
+  const { value, field } = props;
+  let showVal = Array.isArray(value) ? value : [value];
+
+  const _field = { enum: defaultSwitchEnum, ...field };
+
+  return showVal?.map((it, i) => {
+    const option = getFieldOptItByVal(it, _field) || {};
+    const PreNode = option.PrefixNode;
+    console.log(it, option);
+
+    return (
+      <div key={it + "" + i} className="table-cell-prefix-box">
+        {PreNode ? (
+          <PreNode />
+        ) : option.icon ? (
+          option.icon
+        ) : (
+          <div className="prefix-node" style={{ backgroundColor: option.color }}></div>
+        )}
+        {option.label || it}
+      </div>
+    );
+  });
+};
+
+export default PrefixNode;

package/src/components/Tags/index.less

@@ -0,0 +1,3 @@
+.table-cell-tag {
+  margin-bottom: 8px;
+}

package/src/components/Tags/index.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { Tag } from "antd";
+import _ from "lodash";
+
+import { getFieldOptItByVal } from "../../common/utils";
+
+import "./index.less";
+
+export interface ITagsProps {
+  showTags?: boolean | Object;
+  value: any;
+  field?: Object;
+}
+
+export interface ITagOption {
+  value: string | number | boolean;
+  label: string | number;
+  children?: [ITagOption];
+  color: string;
+  icon: ReactNode | string;
+}
+
+export const Tags = (props) => {
+  const { value, field } = props;
+  let showVal = Array.isArray(value) ? value : [value];
+
+  return showVal?.map((it, i) => {
+    const option = getFieldOptItByVal(it, field) || {};
+    return (
+      <Tag key={it + "" + i} className="table-cell-tag" icon={option.icon} color={option.color}>
+        {option.label || it}
+      </Tag>
+    );
+  });
+};
+
+export default Tags;

package/src/list-render.jsx

@@ -9,8 +9,8 @@ import _ from "lodash";
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
 import TableRender from "./table-render";
-import FormDialog from "./form-dialog";
-import DetailDialog from "./detail-dialog";
+import FormModal from "./FormModal";
+import DetailModal from "./DetailModal";
 
 import { objToFormData } from "./common/utils";
 
@@ -23,8 +23,17 @@ const ListRender = forwardRef(function (props, parentRef) {
     queryFormIsExtendModelQuery = false,
     queryFormInitialValues = {},
     dialogConf = {},
+    modalConf = {},
     /** 编辑接口使用 patch 发起请求 */
     isPatchUpdate = false,
+    /**
+     * 表单、详情 展示模式： dialog drawer
+     */
+    modalMode = "dialog",
+    /**
+     * 表单提交是否使用 FormData 格式
+     */
+    useFormData: _useFormData,
   } = props;
   const { createText = props.createText } = i18n || {};
   const [total, setTotal] = useState(0);
@@ -32,18 +41,20 @@ const ListRender = forwardRef(function (props, parentRef) {
   const [formState, setFormState] = useState("");
   const [rowId, setRowId] = useState(0);
   const [listLoading, setListLoading] = useState(false);
-  const formDialogRef = useRef();
-  const detailDialogRef = useRef();
+  const formModalRef = useRef();
+  const detailModalRef = useRef();
   const queryRef = useRef();
   const modelQueryRef = useRef({});
   const formQueryRef = useRef({});
   const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
+  const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
 
   useImperativeHandle(parentRef, () => ({
     getList,
     onSearch,
     forceUpdate,
-    formDialogRef,
+    formModalRef,
+    formDialogRef: formModalRef,
     queryRef,
     onCreate,
     onEdit,
@@ -69,7 +80,6 @@ const ListRender = forwardRef(function (props, parentRef) {
       model.query = {};
     }
     modelQueryRef.current = model?.query;
-
   }, [model?.query]);
 
   useEffect(() => {
@@ -110,7 +120,7 @@ const ListRender = forwardRef(function (props, parentRef) {
       ..._q,
       ..._q1,
       ..._q2,
-      ..._q3
+      ..._q3,
     };
 
     if (mergedQueries.$timerange !== undefined) {
@@ -119,7 +129,6 @@ const ListRender = forwardRef(function (props, parentRef) {
 
     model.query = mergedQueries;
 
-
     model
       ?.getList(mergedQueries)
       .then((res) => {
@@ -145,8 +154,8 @@ const ListRender = forwardRef(function (props, parentRef) {
     getList();
   }
 
-  function onSearch(quer,source) {
-    const query = source === "queryRender" ? {...quer} :{...formQueryRef.current, ...quer};
+  function onSearch(quer, source) {
+    const query = source === "queryRender" ? { ...quer } : { ...formQueryRef.current, ...quer };
     if (model && !model.query) {
       model.query = {};
     }
@@ -167,12 +176,12 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   function onCreate() {
     setFormState("create");
-    formDialogRef.current.show();
+    formModalRef.current.show();
   }
 
   async function onCreateSubmit(data) {
     let _data = typeof model?.createMap === "function" ? model.createMap(data) : data;
-    if (dialogConf.useFormData) {
+    if (useFormData) {
       _data = objToFormData(_data);
     }
     return model
@@ -213,7 +222,7 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   function handleDetail(data, id) {
     setRowId(id);
-    detailDialogRef.current.show(data);
+    detailModalRef.current.show(data);
   }
 
   function onEdit(row, idx) {
@@ -241,13 +250,11 @@ const ListRender = forwardRef(function (props, parentRef) {
   function handleEdit(data, id) {
     setRowId(id);
     setFormState("edit");
-    formDialogRef.current.show(data, "编辑", "edit");
+    formModalRef.current.show(data, "编辑", "edit");
   }
 
   async function onEditSubmit(data) {
     let _data = data;
-    console.log("isPatchUpdate", isPatchUpdate);
-
     if (isPatchUpdate) {
       if (model?.patchMap === "function") {
         _data = model.patchMap(data);
@@ -256,7 +263,7 @@ const ListRender = forwardRef(function (props, parentRef) {
       _data = model.updateMap(data);
     }
 
-    if (dialogConf.useFormData) {
+    if (useFormData) {
       _data = objToFormData(_data);
     }
     const request = isPatchUpdate ? model?.patch : model?.update;
@@ -289,6 +296,12 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   const { Slots = {} } = props;
 
+  const _modalConf = { ...props.dialogConf, ...modalConf };
+  const formProps = { ...props.dialogFormProps, ...props.modalFormProps };
+  const onFormModalClose = props.onFormDialogClose ?? props.onFormModalClose;
+  const modalProps = { ...props.dialogProps, ...props.modalProps };
+  const modalFormMount = props.dialogFormMount ?? props.modalFormMount;
+
   return (
     <div className={`list-render ${props.className}`}>
       <div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
@@ -302,9 +315,9 @@ const ListRender = forwardRef(function (props, parentRef) {
             queryFormInitialValues={
               queryFormIsExtendModelQuery
                 ? {
-                  ...queryFormInitialValues,
-                  ...model.query,
-                }
+                    ...queryFormInitialValues,
+                    ...model.query,
+                  }
                 : queryFormInitialValues
             }
             onSearch={onSearch}
@@ -329,9 +342,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           )}
         </div>
       </div>
-      {Slots.HeaderOthersSuffix && (
-        <Slots.HeaderOthersSuffix onSearch={onSearch} getList={getList} />
-      )}
+      {Slots.HeaderOthersSuffix && <Slots.HeaderOthersSuffix onSearch={onSearch} getList={getList} />}
       <TableRender
         idKey={idKey}
         schema={schema?.schema}
@@ -361,33 +372,37 @@ const ListRender = forwardRef(function (props, parentRef) {
           i18n={i18n}
         />
       ) : null}
-      <FormDialog
-        ref={formDialogRef}
+
+      <FormModal
+        ref={formModalRef}
         schema={schema}
-        dialogConf={props.dialogConf}
         formInitialValues={props.formInitialValues}
-        onClose={props.onFormDialogClose}
-        onSubmit={formState === "edit" ? onEditSubmit : onCreateSubmit}
-        Slots={props.Slots}
-        modalProps={props.dialogModalProps}
-        formProps={props.dialogFormProps}
         components={props.components}
         schemaScope={props.schemaScope}
-        dialogFormMount={props.dialogFormMount}
+        formProps={formProps}
+        modalMode={modalMode}
+        modalConf={_modalConf}
+        onClose={onFormModalClose}
+        onSubmit={formState === "edit" ? onEditSubmit : onCreateSubmit}
+        Slots={props.Slots}
+        modalProps={modalProps}
+        modalFormMount={modalFormMount}
         i18n={i18n}
       />
-      <DetailDialog
-        ref={detailDialogRef}
+
+      <DetailModal
+        ref={detailModalRef}
         schema={schema}
-        dialogConf={props.dialogConf}
         formInitialValues={props.formInitialValues}
-        onClose={props.onFormDialogClose}
-        Slots={props.Slots}
-        detailProps={props.dialogDetailProps}
-        modalProps={props.dialogModalProps}
         components={props.detailComponents}
         schemaScope={props.schemaScope}
-        dialogFormMount={props.dialogFormMount}
+        detailProps={props.dialogDetailProps || props.modalDetailProps}
+        modalMode={modalMode}
+        modalConf={_modalConf}
+        onClose={onFormModalClose}
+        Slots={props.Slots}
+        modalProps={modalProps}
+        modalFormMount={modalFormMount}
       />
     </div>
   );

package/src/query-render/index.jsx

@@ -18,6 +18,7 @@ function QueryRender(props, parentRef) {
     setSchema(
       handleQuerySchema({
         ...props?.config,
+        schemaScope: props.schemaScope,
         schema: _.cloneDeep(props.schema),
         search: props.search,
         filters: _.cloneDeep(props.filters),
@@ -48,12 +49,12 @@ function QueryRender(props, parentRef) {
 
       if (!beforeQuerySearchResult) return;
     }
-    return props.onSearch && props.onSearch(query, 'queryRender');
+    return props.onSearch && props.onSearch(query, "queryRender");
   }
 
   function onReset() {
     formRef.current?.formRender?.reset();
-    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), 'queryRender');
+    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender");
   }
 
   return (

package/src/table-render/index.jsx

@@ -1,8 +1,12 @@
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { Table, Button, Popconfirm, Tooltip } from "antd";
+import { Schema } from "@formily/json-schema";
 import { QuestionCircleOutlined } from "@ant-design/icons";
+import _ from "lodash";
 
 import { FormilyField } from "../components/Formily/FormilyField";
+import Tags from "../components/Tags";
+import PrefixNode from "../components/PrefixNode";
 // getColRender 使用 observer 包裹一层 column 的 render 函数，解决数据无法响应的问题
 import { getColRender } from "../common/formily-utils";
 import { getVal, getFieldList } from "../common/utils";
@@ -15,7 +19,7 @@ const scenario = "table-render";
 function TableRender(props) {
   const { config = {}, query = {}, i18n } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
-  const { orderColType, orderColWidth, tableEmptyValue, isTableSortXIdex = false} = config || {};
+  const { orderColType, orderColWidth, tableEmptyValue, isTableSortXIdex = false } = config || {};
   const [columns, setColumns] = useState([]);
 
   const formilyRef = useRef({
@@ -58,6 +62,7 @@ function TableRender(props) {
       const fieldSchemas = formilyRef.current?.fields;
       if (field.inTable !== false) {
         const { name, title } = field;
+        const comName = field["x-component"];
 
         const decoratorProps = field["x-decorator-props"] || {};
         let _title = title;
@@ -93,11 +98,13 @@ function TableRender(props) {
           };
         } else {
           colRender = function (text, record, index, ...args) {
-            const { width, ellipsis, emptyValue } = _colConf || {};
+            const { width, ellipsis, emptyValue, showTags, showPrefixNode } = _colConf || {};
             const schemaDefaultValue = fieldSchemas[name]?.componentProps?.emptyValue;
             const defaultValue = emptyValue ?? schemaDefaultValue ?? tableEmptyValue ?? "";
 
-            let val = getVal({ ...field, ...fieldSchemas[name] }, record, { fieldSchema: fieldSchemas?.[name] });
+            let val = getVal({ ...field, ...fieldSchemas[name] }, record, {
+              fieldSchema: fieldSchemas?.[name],
+            });
 
             if (val === "" || val === undefined || val === null) {
               val = defaultValue;
@@ -115,13 +122,37 @@ function TableRender(props) {
                 </Tooltip>
               );
             }
+            // 使用 tag 渲染内容
+            if (showTags) {
+              // field 通过 fieldSchemas 获取最新的 field 数据
+              return (
+                <Tags
+                  value={_.get(record, name)}
+                  config={typeof showTags === "object" ? showTags : undefined}
+                  field={{ ...field, ...fieldSchemas?.[name] }}
+                />
+              );
+            }
+            // 使用 前缀节点 渲染内容
+            if (showPrefixNode || (showPrefixNode !== false && comName === "Switch")) {
+              // field 通过 fieldSchemas 获取最新的 field 数据
+              return (
+                <PrefixNode
+                  value={_.get(record, name)}
+                  config={typeof showPrefixNode === "object" ? showPrefixNode : undefined}
+                  field={{ ...field, ...fieldSchemas?.[name] }}
+                />
+              );
+            }
+
             return content;
           };
         }
 
         columns.push({
           ..._colConf,
-          onCell: (record, rowIndex) => (_colConf?.onCell?.({...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) }}, rowIndex) || {}),
+          onCell: (record, rowIndex) =>
+            _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
           title: _title,
           key: name,
           dataIndex: name,
@@ -153,6 +184,7 @@ function TableRender(props) {
           //详情按钮权限
           const _hasDetail =
             hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
+          console.log("_hasDetail", hasDetail, _hasDetail);
 
           //删除按钮权限
           const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;

package/src/form-dialog/index.less

@@ -1,2 +0,0 @@
-.form-dialog {
-}