diff --git a/src/mes/common/commonModelComponent/index.js b/src/mes/common/commonModelComponent/index.js index d251c7f..83d82b4 100644 --- a/src/mes/common/commonModelComponent/index.js +++ b/src/mes/common/commonModelComponent/index.js @@ -1,8 +1,8 @@ /* eslint-disable */ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState, useCallback, memo } from "react"; import moment from "moment"; import { cloneDeep } from "lodash"; -import { Tabs, Modal, Space, Button, DatePicker, Radio, message, Avatar, Row, Col, Table } from "antd"; +import { Tabs, Modal, Space, Button, DatePicker, Radio, message, Avatar, Row, Col, Table, Input } from "antd"; import * as commonUtils from "@/utils/utils"; import * as commonConfig from "@/utils/config"; import * as commonServices from "@/services/services"; @@ -3487,6 +3487,34 @@ const TaskConfirmModal = props => { ); }; +// 板数输入框:本地 state 维护输入值,仅 blur 时同步到父级,避免输入过程中表格重渲染导致失焦 +const PlateNumInput = memo(({ value, sId, onCommit }) => { + const [inputValue, setInputValue] = useState(value || 0); + + // 父级 value 变化时同步本地(本行 blur 提交后或外部改动) + useEffect(() => { + setInputValue(value || 0); + }, [value]); + + const handleChange = (e) => { + const filtered = (e.target.value || '').toString().replace(/[^\d]/g, ''); + setInputValue(filtered); + }; + + const handleBlur = () => { + onCommit(inputValue, sId); + }; + + return ( + + ); +}); + const SisColorChooseComponent = props => { const { sisColorChooseVisible, sisColorField, sisTableName, controlSelectedRowId } = props; @@ -3517,6 +3545,18 @@ const SisColorChooseComponent = props => { setRightData([]); } }, [props.sisColorSelectedData, props.sisColorChooseVisible, sisTableName, controlSelectedRowId, sisColorField, props]) + + // 注意:此处 useCallback 必须在下面的 early return 之前调用,否则会违反 Rules of Hooks + const handlePlateNumChange = useCallback((value, sId) => { + const numValue = (value || '').toString().replace(/[^\d]/g, ''); + setRightData(prev => prev.map(item => { + if (item.sId === sId) { + return { ...item, dColor: Number(numValue) }; + } + return item; + })); + }, []); + if (!sisColorChooseVisible) return ""; const handleClose = () => { @@ -3666,34 +3706,16 @@ const SisColorChooseComponent = props => { }, ]; - const handlePlateNumChange = (value, record) => { - const numValue = value.replace(/[^\d]/g, ''); - const newData = rightData.map(item => { - if (item.sId === record.sId) { - return { ...item, dColor: Number(numValue) || 0 }; - } - return item; - }); - setRightData(newData); - }; - const rightColumns = [ ...baseColumns.map(col => { if (col.dataIndex === 'dColor') { return { ...col, render: (text, record) => ( - handlePlateNumChange(e.target.value, record)} - style={{ - width: '120px', - padding: '4px 8px', - border: '1px solid #d9d9d9', - borderRadius: '4px', - fontSize: '14px' - }} + ) };