@hzab/list-render 1.8.2 → 1.8.3-beta2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# @hzab/list-render@1.9.0
+
+feat: 列表渲染支持 tag 模式、前缀 Node （前缀圆点）
+feat: Switch 渲染模式优化，使用 前缀 Node （前缀圆点）
+feat: 新增、编辑、详情弹窗支持抽屉模式
+
 # @hzab/list-render@1.8.2
 
 fix: query schema props scope 模式问题修复

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.2",
+  "version": "1.8.3-beta2",
   "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,29 +149,35 @@ 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} />
+        <FormSlot {...props} formRef={formRef} scenario={scenario} schema={props.schema?.schema} />
       ) : (
         <FormRender
           {...props.formProps}
@@ -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/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,
@@ -165,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
@@ -211,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) {
@@ -239,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);
@@ -254,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;
@@ -287,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" : ""}`}>
@@ -357,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/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 {
-}