diff --git a/src/components/iconText/index.tsx b/src/components/iconText/index.tsx index 1bc9231..9018d05 100644 --- a/src/components/iconText/index.tsx +++ b/src/components/iconText/index.tsx @@ -31,7 +31,6 @@ const IconText: FC = (props) => { const textComponent = children ? children : {text} const component = ()=>{ - console.log('direction===>',direction); if(direction === 'left' || direction === 'top'){ return <> {iconComponent} diff --git a/src/pages/shopping/components/bottomEditBar/index.tsx b/src/pages/shopping/components/bottomEditBar/index.tsx index 76d24af..ea9d210 100644 --- a/src/pages/shopping/components/bottomEditBar/index.tsx +++ b/src/pages/shopping/components/bottomEditBar/index.tsx @@ -22,10 +22,10 @@ export default (props: PropsType) => { const selectCallBack = () => { onSelectCheckbox && onSelectCheckbox(true) - dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: true }) + dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: true }) } const closeCallBack = () => { - dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false }) + dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: false }) onSelectCheckbox && onSelectCheckbox(false) } diff --git a/src/pages/shopping/components/bottomSettleBar/index.tsx b/src/pages/shopping/components/bottomSettleBar/index.tsx index c002a0e..ecec741 100644 --- a/src/pages/shopping/components/bottomSettleBar/index.tsx +++ b/src/pages/shopping/components/bottomSettleBar/index.tsx @@ -9,9 +9,8 @@ type PropsType = { onSettleAccount?: Function } -export default props => { +export default (props: PropsType) => { const { onSettleAccount, amount = 0 } = props - console.log('amount==>', amount) const handleSettle = () => { onSettleAccount && onSettleAccount() diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index 419fb76..185868b 100644 --- a/src/pages/shopping/components/colorKindItem/index.tsx +++ b/src/pages/shopping/components/colorKindItem/index.tsx @@ -42,26 +42,31 @@ let ColorKindItem: FC = props => { const formatUnit = itemData => { return itemData.sale_mode == EnumSaleMode.Bulk ? '条' : '米' } - + // 选中 const handleSelect = () => { dispatch({ type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, data: { purchaserId: purchaserId, - multipleSelection: { ...state?.multipleSelection, [itemData.id]: { - id: itemData?.id, - estimate_amount: itemData.estimate_amount, - product_code: itemData.product_code, - product_color_code: itemData.product_color_code, - sale_mode: itemData.sale_mode, - count: itemData.sale_mode === EnumSaleMode.Bulk ? itemData.roll : Number(formatMeterDiv(itemData.length)), - } }, + multipleSelection: { + ...state?.multipleSelection, + [itemData.id]: { + id: itemData?.id, + estimate_amount: itemData.estimate_amount, + product_code: itemData.product_code, + product_color_code: itemData.product_color_code, + sale_mode: itemData.sale_mode, + count: itemData.sale_mode === EnumSaleMode.Bulk ? itemData.roll : Number(formatMeterDiv(itemData.length)), + } + }, }, }) } + // 未选中 const handleClose = () => { - const temp = state?.multipleSelection + const temp = {...state?.multipleSelection} delete temp?.[itemData.id] + console.log('handleClose==>',temp); dispatch({ type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX, data: { diff --git a/src/pages/shopping/components/shoppingCart/index.tsx b/src/pages/shopping/components/shoppingCart/index.tsx index a16abff..1ee10e1 100644 --- a/src/pages/shopping/components/shoppingCart/index.tsx +++ b/src/pages/shopping/components/shoppingCart/index.tsx @@ -1,5 +1,6 @@ import { FC, ReactNode, useEffect, useMemo, useReducer, useRef } from 'react' import { + GoodsMeta, ShoppingAction, ShoppingDispatchContext, ShoppingDispatchContextValue, @@ -11,8 +12,7 @@ import { ColorStore, ShoppingStateContextValue } from '../../context' import { ShoppingStore } from '../../context/shoppingStore' export type TriggerCheckboxOptions = { - colorStore: ColorStore - currentCheckedPurchaserId: ShoppingStateContextValue['currentCheckedPurchaserId'] + multipleSelection: GoodsMeta['multipleSelection'] setSelectedAmount: ShoppingDispatchContextValue['UPDATE_SELECTED_AMOUNT'] } @@ -42,13 +42,12 @@ export const ShoppingProvider: FC = props => { // 这里要在 useEffect 也就是刷新 state 后再调用,否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改 useEffect(() => { - console.log('onTriggerCheckboxRef start run') + console.log('onTriggerCheckboxRef start run', state.colorStore?.[state.currentCheckedPurchaserId]?.multipleSelection) onTriggerCheckboxRef.current?.({ - colorStore: state.colorStore, - currentCheckedPurchaserId: state.currentCheckedPurchaserId, + multipleSelection: state.colorStore?.[state.currentCheckedPurchaserId]?.multipleSelection, setSelectedAmount: amount => dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: amount }), }) - }, [state.colorStore, state.currentCheckedPurchaserId]) + }, [state.colorStore?.[state.currentCheckedPurchaserId]?.multipleSelection]) // 加入一个监听,为 onFieldsChange 回调服务 // useEffect(() => { diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index 2b1f1cc..d7a93f1 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -86,7 +86,7 @@ let ShoppingCartItem: FC = props => { dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: type }) // 重置预估金额 dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 }) - dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false }) + dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: false }) } @@ -100,7 +100,7 @@ let ShoppingCartItem: FC = props => { type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID, data: itemData?.purchaser_id as number, }) - dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false }) + dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: false }) } // 统计已选面料 @@ -118,6 +118,7 @@ let ShoppingCartItem: FC = props => { // 统计已选颜色 const colorChecked = useMemo(() => { + console.log('colorChecked item',multipleSelection); if (!multipleSelection || isEmptyObject(multipleSelection)) return 0 return new Set( Object.values(multipleSelection).reduce((prev, item: Goods) => { @@ -135,13 +136,10 @@ let ShoppingCartItem: FC = props => { if (!multipleSelection || isEmptyObject(multipleSelection)) return 0 return ( Object.values(multipleSelection).reduce((prev, item: Goods) => { - if (selected === EnumSaleMode.Bulk) { - return prev + item.count - } - return prev + return prev + item.count }, 0) || 0 ) - }, [multipleSelection, currentCheckedPurchaserId, selected]) + }, [multipleSelection, currentCheckedPurchaserId, selected, itemData]) const [isPending, startTransition] = useTransition() const { fetchData } = ShoppingCartListApi() @@ -222,7 +220,7 @@ let ShoppingCartItem: FC = props => { 已选 {materialChecked} 种面料,{colorChecked} 个颜色,共{' '} - {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${formatMeterDiv(lengthOrRollChecked).toLocaleString()} 米`} + {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${(lengthOrRollChecked).toLocaleString()} 米`} @@ -370,12 +368,28 @@ const GoodsList = memo(props => { const withStateSlice = (comp, slice) => { const MemoComp = memo(comp, (prevProps, nextProps) => { let needMemo = true + // const prevCheckedPurchaserId = prevProps.state.currentCheckedPurchaserId + // const nextCheckedPurchaserId = nextProps.state.currentCheckedPurchaserId + // const purchaser_id = prevProps.itemData.purchaser_id + // const prevMultipleSelection = prevProps.state.colorStore[purchaser_id].multipleSelection + // const nextMultipleSelection = nextProps.state.colorStore[purchaser_id].multipleSelection if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) { needMemo = false } + if(prevProps.itemData.purchaser_name === '牛逼哄哄纺织'){ + console.log('------withStateSlice props-------'); + console.log('withStateSlice props prevProps', prevProps); + console.log('withStateSlice props nextProps', nextProps); + console.log('------withStateSlice props-------'); + } if (JSON.stringify(prevProps.state) !== JSON.stringify(nextProps.state)) { + console.log('MultipleSelection 有变化'); needMemo = false } + // if (JSON.stringify(prevCheckedPurchaserId) !== JSON.stringify(nextCheckedPurchaserId)) { + // console.log('checkedPurchaserId 有变化'); + // needMemo = false + // } return needMemo }) const Wrapper = (props, ref) => { diff --git a/src/pages/shopping/context/index.ts b/src/pages/shopping/context/index.ts index 43379e9..d261ee3 100644 --- a/src/pages/shopping/context/index.ts +++ b/src/pages/shopping/context/index.ts @@ -64,7 +64,7 @@ export interface ShoppingStateContextValue { export enum ShoppingDispatchType { UPDATE_MANAGE_STATUS = 'UPDATE_MANAGE_STATUS', - UPDATE_MULTIPLE_SELECTION = 'UPDATE_MULTIPLE_SELECTION', + UPDATE_MULTIPLE_SELECTION_STATUS = 'UPDATE_MULTIPLE_SELECTION_STATUS', UPDATE_CURRENT_CHECKED_PURCHASERID = 'UPDATE_CURRENT_CHECKED_PURCHASERID', UPDATE_CURRENT_CHECKED_SALEMODE = 'UPDATE_CURRENT_CHECKED_SALEMODE', UPDATE_COLOR_STORE = 'UPDATE_COLOR_STORE', @@ -74,7 +74,7 @@ export enum ShoppingDispatchType { export interface ShoppingDispatchContextValue { [ShoppingDispatchType.UPDATE_MANAGE_STATUS]: (isManageStatus: ShoppingStateContextValue['isManageStatus']) => void - [ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION]: (isMultipleSelection: ShoppingStateContextValue['isMultipleSelection']) => void + [ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS]: (isMultipleSelection: ShoppingStateContextValue['isMultipleSelection']) => void [ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID]: (purchaserId: ShoppingStateContextValue['currentCheckedPurchaserId']) => void [ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE]: (saleMode: ShoppingStateContextValue['currentCheckedSaleMode']) => void [ShoppingDispatchType.UPDATE_COLOR_STORE]: (colorStore: React.SetStateAction) => void @@ -94,7 +94,7 @@ export function shoppingReducer(state: ShoppingStateContextValue, action: Shoppi case ShoppingDispatchType.UPDATE_MANAGE_STATUS: { return { ...state, isManageStatus: data } } - case ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION: { + case ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS: { return { ...state, isMultipleSelection: data } } case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID: { @@ -117,7 +117,7 @@ export function shoppingReducer(state: ShoppingStateContextValue, action: Shoppi [data.purchaserId as number]: { purchaserId: data.purchaserId, goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind }, - multipleSelection: data?.multipleSelection ? data.multipleSelection : state.colorStore[data.purchaserId]?.multipleSelection, + multipleSelection: data.multipleSelection ? data.multipleSelection : state.colorStore[data.purchaserId]?.multipleSelection, }, }, } diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 94a115d..df03d82 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -18,15 +18,13 @@ import { alert, goLink, isEmptyObject } from '@/common/common' export const Shopping: FC = memo(() => { // 计算总的预估金额 - const handleTriggerCheckbox = ({ colorStore, currentCheckedPurchaserId, setSelectedAmount }) => { - const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.multipleSelection + const handleTriggerCheckbox = ({ multipleSelection, setSelectedAmount }) => { console.log('handleTriggerCheckbox==>', multipleSelection) if (multipleSelection) { - const result = Object.values(multipleSelection).reduce((prev: number, value: Goods) => { + const result = Object.values(multipleSelection).reduce((prev: number , value: Goods) => { return prev + Number(formatPriceDiv(value.estimate_amount)) }, 0) as number - console.log('result==>', result) // 同步修改上下文的 预估金额 setSelectedAmount(result) } else {