dependencies implementation

QbjGKNick · Aug 10, 2021 · 180aafa · 180aafa
1 parent 4490bac
commit 180aafa
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/docs/form-render/schema/props.md b/docs/form-render/schema/props.md
@@ -33,7 +33,7 @@ toc: content
 | hideTitle  | boolean | 只支持“list1”，隐藏 title，展示更紧凑 |
 | hideDelete | boolean |             隐藏删除按钮              |
 | hideAdd    | boolean |           隐藏新增/复制按钮           |
-| hdeCopy    | boolean |             隐藏复制按钮              |
+| hideCopy   | boolean |             隐藏复制按钮              |
 | hideMove   | boolean |       隐藏上下移动 item 的按钮        |
 | buttons    |  array  |             下详 （注 1）             |
 

diff --git a/packages/form-render/src/core/RenderField/ExtendedWidget.js b/packages/form-render/src/core/RenderField/ExtendedWidget.js
@@ -18,6 +18,7 @@ const ExtendedWidget = ({
   schema,
   onChange,
   value,
+  dependValues,
   children,
   onItemChange,
   formData,
@@ -26,6 +27,7 @@ const ExtendedWidget = ({
   dataPath,
   disabled,
   dataIndex,
+  // $id,
 }) => {
   const {
     widgets,
@@ -107,6 +109,7 @@ const ExtendedWidget = ({
 
   // 避免传组件不接受的props，按情况传多余的props
   widgetProps.addons = {
+    dependValues,
     onItemChange,
     setValue: onItemChange, // onItemChange 已经文档放出去了，不去掉了，但改个好理解的名字
     getValue,
@@ -123,9 +126,9 @@ const ExtendedWidget = ({
 
   return (
     <Suspense fallback={<div></div>}>
-    <div className='fr-item-wrapper'>
-      <Widget {...finalProps} />
-    </div>
+      <div className="fr-item-wrapper">
+        <Widget {...finalProps} />
+      </div>
     </Suspense>
   );
 };
@@ -140,6 +143,11 @@ const areEqual = (prev, current) => {
   if (prev.disabled !== current.disabled) {
     return false;
   }
+  if (
+    JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)
+  ) {
+    return false;
+  }
   if (
     JSON.stringify(prev.value) === JSON.stringify(current.value) &&
     JSON.stringify(prev.schema) === JSON.stringify(current.schema)

diff --git a/packages/form-render/src/core/RenderField/index.js b/packages/form-render/src/core/RenderField/index.js
@@ -10,9 +10,11 @@ import ExtendedWidget from './ExtendedWidget';
 // TODO: 之后不要直接用get，收口到一个内部方法getValue，便于全局 ctrl + f 查找
 const RenderField = props => {
   const {
+    $id,
     dataIndex,
     dataPath,
     _value,
+    dependValues,
     _schema,
     labelClass,
     labelStyle,
@@ -95,13 +97,15 @@ const RenderField = props => {
   };
 
   const widgetProps = {
+    $id,
     schema: _schema,
     readOnly: _readOnly,
     disabled: _disabled,
     onChange,
     getValue: _getValue,
     formData,
     value: _value,
+    dependValues,
     onItemChange,
     dataIndex,
     dataPath,

diff --git a/packages/form-render/src/core/index.js b/packages/form-render/src/core/index.js
@@ -26,7 +26,7 @@ const Core = ({
   debugCss,
   ...rest
 }) => {
-  // console.log('<Core>');
+  // console.log('<Core>', id);
   const snapShot = useRef();
 
   const { flatten, errorFields, isEditing, formData, allTouched } = useStore();
@@ -36,7 +36,23 @@ const Core = ({
 
   let dataPath = getDataPath(id, dataIndex);
   const _value = getValueByPath(formData, dataPath);
-  let schema = clone(item.schema); // TODO: 用deepClone，函数啥的才能正常copy，但是deepClone的代价是不是有点大，是否应该让用户避免schema里写函数
+  let schema = clone(item.schema);
+  const dependencies = schema.dependencies;
+  const dependValues = [];
+
+  try {
+    if (Array.isArray(dependencies)) {
+      dependencies.forEach(item => {
+        const itemPath = getDataPath(item, dataIndex);
+        const result = getValueByPath(formData, itemPath);
+        if (result !== undefined) {
+          dependValues.push(result);
+        }
+      });
+    }
+  } catch (error) {
+    console.error(`dependencies 计算报错，${dependencies}`);
+  }
 
   // 节流部分逻辑，编辑时不执行
   if (isEditing && snapShot.current) {
@@ -58,6 +74,7 @@ const Core = ({
     dataIndex, // 数据来源是数组的第几个index，上层每有一个list，就push一个index
     dataPath,
     _value,
+    dependValues,
     hideTitle,
     hideValidation,
     debugCss,
@@ -72,7 +89,7 @@ const Core = ({
     ...rest,
   };
 
-  return <MCore {...dataProps} />;
+  return <CoreRender {...dataProps} />;
 };
 
 const CoreRender = ({
@@ -85,6 +102,7 @@ const CoreRender = ({
   debugCss,
   schema,
   _value,
+  dependValues,
   displayType,
   column,
   labelWidth,
@@ -217,6 +235,7 @@ const CoreRender = ({
     dataIndex,
     dataPath,
     _value,
+    dependValues,
     _schema: schema,
     labelClass,
     labelStyle,
@@ -289,6 +308,11 @@ const areEqual = (prev, current) => {
   if (prev.labelWidth !== current.labelWidth) {
     return false;
   }
+  if (
+    JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)
+  ) {
+    return false;
+  }
   if (
     JSON.stringify(prev._value) === JSON.stringify(current._value) &&
     JSON.stringify(prev.schema) === JSON.stringify(current.schema) &&