Merge pull request alibaba#693 from alibaba/feat/drawer-list-widget

feat(fr): 复杂嵌套列表支持自定义展示组件
wuweikd · Mar 15, 2022 · 9be213d · 9be213d
2 parents 2c396be + 6705898
commit 9be213d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/DrawerList.js b/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/DrawerList.js
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useRef } from 'react';
 import Core from '../../index';
-import { useSet } from '../../../hooks';
+import { useSet, useTools } from '../../../hooks';
 import { getDataPath, getKeyFromPath, getDisplayValue } from '../../../utils';
 import { Button, Table, Drawer, Popconfirm } from 'antd';
 // import ArrowDown from '../../../components/ArrowDown';
@@ -25,6 +25,7 @@ const DrawerList = ({
   changeList,
   listData,
 }) => {
+  const { widgets } = useTools();
   const { props = {}, itemProps = {} } = schema;
   const { buttons, ...columnProps } = itemProps;
   const { pagination = {}, ...rest } = props;
@@ -66,9 +67,16 @@ const DrawerList = ({
         const childPath = getDataPath(child, [record.$idx]);
         const errorObj = errorFields.find(item => item.name == childPath) || {};
         //TODO: 万一error在更深的层，这个办法是find不到的，会展示那一行没有提示。可以整一行加一个红线的方式处理
+        const Widget = widgets[schema.readOnlyWidget];
         return (
           <div>
-            <div>{getDisplayValue(value, schema)}</div>
+            <div>
+              {Widget ? (
+                <Widget value={value} schema={schema} />
+              ) : (
+                getDisplayValue(value, schema)
+              )}
+            </div>
             {errorObj.error && (
               <ErrorMessage message={errorObj.error} schema={schema} />
             )}

diff --git a/packages/form-render/src/form-render-core/src/utils.js b/packages/form-render/src/form-render-core/src/utils.js
@@ -642,7 +642,10 @@ export const getDisplayValue = (value, schema) => {
       return value;
     }
   }
-  return JSON.stringify(value);
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  return value;
 };
 
 // 去掉数组里的空元素 {a: [null, {x:1}]} => {a: [{x:1}]}