From a7bd0695ce1c8cf847d866dca67f9dbd39a4f352 Mon Sep 17 00:00:00 2001 From: sealday Date: Fri, 8 Mar 2024 21:05:56 +0800 Subject: [PATCH] perf: optimize count and weight item --- .../plugins/@hera/plugin-rental/package.json | 1 + .../custom-components/RecordItemCount.tsx | 63 +++++++------------ .../custom-components/RecordItemWeight.tsx | 49 ++++----------- 3 files changed, 37 insertions(+), 76 deletions(-) diff --git a/packages/plugins/@hera/plugin-rental/package.json b/packages/plugins/@hera/plugin-rental/package.json index a58d83216..2323241de 100644 --- a/packages/plugins/@hera/plugin-rental/package.json +++ b/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", diff --git a/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemCount.tsx b/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemCount.tsx index 877f3d024..200c87ad1 100644 --- a/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemCount.tsx +++ b/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 { onFieldInit, onFieldValueChange } from '@formily/core'; +import { observer, useField, useForm } from '@formily/react'; 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) => { - const reqProductCategory = useRequest({ +export const RecordItemCount = observer((props) => { + const param = { resource: 'product_category', action: 'list', params: { pageSize: 99999, }, - }); - const [items, setItems] = useState([]); - const [result, setResult] = useState('-'); - // 先做重量 + }; + const cacheKey = stringify(param); + console.log(cacheKey); + const { loading, data } = useRequest(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(() => { - onFieldInit(currentItemsPath, () => { - setItems(_.cloneDeep(form.values.items)); - }); - onFieldValueChange(currentItemsPath, () => { - setItems(_.cloneDeep(form.values.items)); - }); - }); - useEffect(() => { - if (!reqProductCategory.loading) { - calc(); - } - }, [items, reqProductCategory.loading]); - return {result}; -}; + if (!data && loading) { + return ; + } + + const item = form.getValuesIn(field.path.slice(0, -2).entire); + if (item?.product && item?.count && data) { + const category = data.data.find((category) => category.id === item.product.category_id); + if (!category) return; + const value = category.convertible ? (item.product.ratio || 0) * item.count : item.count; + const unit = category.convertible ? category.conversion_unit : category.unit; + return {formatQuantity(value, 2) + unit}; + } + return - ; +}); RecordItemCount.displayName = 'RecordItemCount'; RecordItemCount[KEY_CUSTOM_COMPONENT_TYPE] = CUSTOM_COMPONENT_TYPE_FIELD; diff --git a/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemWeight.tsx b/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemWeight.tsx index 22803a50c..49455b4cc 100644 --- a/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordItemWeight.tsx +++ b/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 { onFieldInit, onFieldValueChange } from '@formily/core'; +import { observer, useField, useForm } from '@formily/react'; import _ from 'lodash'; import { formatQuantity } from '../../utils/currencyUtils'; -// 按产品表换算逻辑计算重量 -export const RecordItemWeight = (props) => { - const [items, setItems] = useState([]); - const [result, setResult] = useState('-'); - // 先做重量 + +export const RecordItemWeight = observer((props) => { 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 value = ((itemData.product.weight || 0) * itemData.count) / 1000; - if (value) { - setResult(formatQuantity(value, 2) + '吨'); - } + const item = form.getValuesIn(field.path.slice(0, -2).entire); + if (item?.product && item?.count) { + const value = ((item.product.weight || 0) * item.count) / 1000; + if (value) { + return {formatQuantity(value, 2) + '吨'}; } - }; - - useFormEffects(() => { - onFieldInit(currentItemsPath, () => { - setItems(_.cloneDeep(form.values.items)); - }); - onFieldValueChange(currentItemsPath, () => { - setItems(_.cloneDeep(form.values.items)); - }); - }); - useEffect(() => { - if (items) { - calc(); - } - }, [items]); - return {result}; -}; + } + return - ; +}); RecordItemWeight.displayName = 'RecordItemWeight'; RecordItemWeight[KEY_CUSTOM_COMPONENT_TYPE] = CUSTOM_COMPONENT_TYPE_FIELD;