perf: optimize count and weight item

packages/plugins/@hera/plugin-rental/package.json

@@ -11,6 +11,7 @@
     "@formily/react": "^2.2.27",
     "react": "18.*",
     "antd": "5.*",
+    "flatted": "^3.2.9",
     "qrcode": "^1.5.1",
     "dayjs": "^1.11.8",
     "react-router-dom": "^6.11.2",

packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemCount.tsx

@@ -1,59 +1,44 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import {
   CUSTOM_COMPONENT_TYPE_FIELD,
   KEY_CUSTOM_COMPONENT_LABEL,
   KEY_CUSTOM_COMPONENT_TYPE,
 } from '@hera/plugin-core/client';
-import { useField, useForm, useFormEffects } from '@formily/react';
+import { observer, useField, useForm } from '@formily/react';
-import { onFieldInit, onFieldValueChange } from '@formily/core';
 import _ from 'lodash';
 import { useRequest } from '@nocobase/client';
 import { formatQuantity } from '../../utils/currencyUtils';
+import { Spin } from 'antd';
+import { stringify } from 'flatted';
 
-export const RecordItemCount = (props) => {
+export const RecordItemCount = observer((props) => {
-  const reqProductCategory = useRequest<any>({
+  const param = {
     resource: 'product_category',
     action: 'list',
     params: {
       pageSize: 99999,
     },
-  });
+  };
-  const [items, setItems] = useState([]);
+  const cacheKey = stringify(param);
-  const [result, setResult] = useState('-');
+  console.log(cacheKey);
-  // 先做重量
+  const { loading, data } = useRequest<any>(param, { cacheKey });
   const form = useForm();
   const field = useField();
-  const currentItemsPath = field.path.parent().parent().entire + '.*';
-  const calc = () => {
-    const path = field.path.entire as string;
-    const regx = path.match(/\d+/g);
-    if (!regx) return;
-    const itemiIndex = regx[0];
-    const itemData = items[itemiIndex];
-    if (itemData.product && itemData.count) {
-      const category = reqProductCategory.data.data.find((category) => category.id === itemData.product.category_id);
-      if (!category) return;
-      const value = category.convertible ? (itemData.product.ratio || 0) * itemData.count : itemData.count;
-      const unit = category.convertible ? category.conversion_unit : category.unit;
-      setResult(formatQuantity(value, 2) + unit);
-    }
-  };
 
-  useFormEffects(() => {
+  if (!data && loading) {
-    onFieldInit(currentItemsPath, () => {
+    return <Spin />;
-      setItems(_.cloneDeep(form.values.items));
+  }
-    });
+
-    onFieldValueChange(currentItemsPath, () => {
+  const item = form.getValuesIn(field.path.slice(0, -2).entire);
-      setItems(_.cloneDeep(form.values.items));
+  if (item?.product && item?.count && data) {
-    });
+    const category = data.data.find((category) => category.id === item.product.category_id);
-  });
+    if (!category) return;
-  useEffect(() => {
+    const value = category.convertible ? (item.product.ratio || 0) * item.count : item.count;
-    if (!reqProductCategory.loading) {
+    const unit = category.convertible ? category.conversion_unit : category.unit;
-      calc();
+    return <span>{formatQuantity(value, 2) + unit}</span>;
-    }
+  }
-  }, [items, reqProductCategory.loading]);
+  return <span> - </span>;
-  return <span>{result}</span>;
+});
-};
 
 RecordItemCount.displayName = 'RecordItemCount';
 RecordItemCount[KEY_CUSTOM_COMPONENT_TYPE] = CUSTOM_COMPONENT_TYPE_FIELD;

packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemWeight.tsx

@@ -1,50 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   CUSTOM_COMPONENT_TYPE_FIELD,
   KEY_CUSTOM_COMPONENT_LABEL,
   KEY_CUSTOM_COMPONENT_TYPE,
 } from '@hera/plugin-core/client';
-import { useField, useForm, useFormEffects } from '@formily/react';
+import { observer, useField, useForm } from '@formily/react';
-import { onFieldInit, onFieldValueChange } from '@formily/core';
 import _ from 'lodash';
 import { formatQuantity } from '../../utils/currencyUtils';
-// 按产品表换算逻辑计算重量
+
-export const RecordItemWeight = (props) => {
+export const RecordItemWeight = observer((props) => {
-  const [items, setItems] = useState([]);
-  const [result, setResult] = useState('-');
-  // 先做重量
   const form = useForm();
   const field = useField();
-  const currentItemsPath = field.path.parent().parent().entire + '.*';
+  const item = form.getValuesIn(field.path.slice(0, -2).entire);
-  const calc = () => {
+  if (item?.product && item?.count) {
-    const path = field.path.entire as string;
+    const value = ((item.product.weight || 0) * item.count) / 1000;
-    const regx = path.match(/\d+/g);
+    if (value) {
-    if (!regx) return;
+      return <span>{formatQuantity(value, 2) + '吨'}</span>;
-    const itemiIndex = regx[0];
-    const itemData = items[itemiIndex];
-    if (itemData.product && itemData.count) {
-      const value = ((itemData.product.weight || 0) * itemData.count) / 1000;
-      if (value) {
-        setResult(formatQuantity(value, 2) + '吨');
-      }
     }
-  };
+  }
-
+  return <span> - </span>;
-  useFormEffects(() => {
+});
-    onFieldInit(currentItemsPath, () => {
-      setItems(_.cloneDeep(form.values.items));
-    });
-    onFieldValueChange(currentItemsPath, () => {
-      setItems(_.cloneDeep(form.values.items));
-    });
-  });
-  useEffect(() => {
-    if (items) {
-      calc();
-    }
-  }, [items]);
-  return <span>{result}</span>;
-};
 
 RecordItemWeight.displayName = 'RecordItemWeight';
 RecordItemWeight[KEY_CUSTOM_COMPONENT_TYPE] = CUSTOM_COMPONENT_TYPE_FIELD;