1.处理移动端PDA 大数据量情况下，输入卡顿情况

Min
1 parent d9ea02ad
Showing 3 changed files with 40 additions and 16 deletions
src/mobile/common/CommobileComponent.js
src/mobile/common/CommobileSubBill.js
src/mobile/common/CommobileSubBillEvent.js
@@ -398,9 +398,8 @@ export default class CommonComponent extends Component {
   }
   /* 主表过滤从表  */
-  handleMobileFilterTable = (e, bClear) => {
-    console.log('主表过滤从表', this.props.record);
-    this.props.onMobileFilterTable(this.props.showConfig, this.props.name, this.props.record, '', bClear);
+  handleMobileFilterTable = (e, bClear, searchValue) => {
+    this.props.onMobileFilterTable(this.props.showConfig, this.props.name, this.props.record, searchValue || '', bClear);
   }
   /**   渲染   */
@@ -492,19 +491,34 @@ export default class CommonComponent extends Component {
         } else if (is_Scan) {
           input = <div style={{ position: 'relative' }}><InputItem clear {...outFormItemProps} >{sTitle}</InputItem><span className={styles.spanStyle} onClick={this.handleMobileScan}><img className={styles.scanStyle} src={scan} style={!this.state.enabled ? { opacity: 0.8 } : { opacity: 1 }} alt="scan" /></span></div>;
         } else if (is_Search) {
+          // 获取输入值的辅助函数（InputItem 的 ref 结构: ref.state.value）
+          const getSearchValue = () => {
+            if (this.searchInputRef && this.searchInputRef.state) {
+              return this.searchInputRef.state.value || '';
+            }
+            return '';
+          };
+
+          // 清空输入框的辅助函数
+          const clearSearchInput = () => {
+            if (this.searchInputRef && this.searchInputRef.state) {
+              this.searchInputRef.state.value = '';
+            }
+          };
+
           // 封装回车处理函数，复用点击搜索的逻辑
           const handleSearchEnter = e => {
             if (e.key === "Enter") {
               e.preventDefault();
-              // 和右侧放大镜点击执行同一个搜索方法
-              this.handleMobileFilterTable(e);
+              const searchValue = getSearchValue();
+              console.log('搜索框回车', searchValue);
+              this.handleMobileFilterTable(e, false, searchValue);
             }
           };
           // 自定义清空方法
           const handleClear = (e) => {
-            // 构造空值事件，同步更新受控value newValue
-            const emptyEvent = { target: { value: '' } };
+            clearSearchInput();
             this.handleSelectOptionEvent();
             // 清空后执行搜索刷新列表
             this.handleMobileFilterTable(e, true);
@@ -518,8 +532,11 @@ export default class CommonComponent extends Component {
           input = (
             <div style={{ position: "relative", width: "95%" }}>
               <InputItem
-                // clear
-                {...outFormItemProps}
+                id={this.props.showConfig.sName}
+                placeholder={this.props.showConfig.placeholder || '请输入'}
+                disabled={!this.state.enabled}
+                ref={(el) => { this.searchInputRef = el; }}
+                clear
                 onKeyDown={handleSearchEnter}
                 // 关键：绑定清空事件
                 onClear={handleClearInput}
@@ -536,7 +553,11 @@ export default class CommonComponent extends Component {
           <span style={{ fontSize: 30, color: '#ccc' }}>×</span>
         </span>
               )}
-              <span className={styles.searchStyle} onClick={e => this.handleMobileFilterTable(e)}>
+              <span className={styles.searchStyle} onClick={e => {
+                const searchValue = getSearchValue();
+                console.log('搜索框点击搜索', searchValue);
+                this.handleMobileFilterTable(e, false, searchValue);
+              }}>
                 <img className={styles.scanStyle} src={search} style={!this.state.enabled ? { opacity: 0.8 } : { opacity: 1 }} alt="scan" />
               </span>
@@ -2076,7 +2076,7 @@ class CommobileBill extends React.Component {
     const dWidth = document.documentElement.clientWidth || document.body.clientWidth; /* 获取手机视窗宽度 */
-    const dHeight = document.documentElement.clientHeight || document.body.clientHeight; /* 获取手机视窗宽1度 */
+    const dHeight = document.documentElement.clientHeight || document.body.clientHeight; /* 获取手机视窗宽度 */
     const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 18 } };
     const style = {
       display: 'flex',
@@ -2094,7 +2094,7 @@ class CommobileBill extends React.Component {
     const rowSum = (rowData, sectionID, rowID) => {
       return (
         <div style={{ backgroundColor: '#f0f0f0',  marginBottom: '8px', borderBottom:'6px solid rgb(236, 236, 237)' }} key={rowID}>
-         2323232 {commonUtils.isEmptyObject(slaveConfig) ? '' : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '').map((child) => {
+          {commonUtils.isEmptyObject(slaveConfig) ? '' : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '').map((child) => {
             const sMemo = child.sName.toLowerCase().endsWith('memo');
             // sUseInfo是指被其他单据调用，或者被审核
             let enabledNew = (enabled && !child.bReadonly && !child.specialControl && commonUtils.isEmpty(sUseInfo));
@@ -2472,13 +2472,13 @@ const TabComponentSlave = (props) =&gt; {
 const TabComponentSlaveChild = (props) => {
   const { masterConfig, masterData, slaveData: slaveDataOld,  slaveChildData: slaveChildDataOld, slaveChildConfig, slaveConfig, sModelsId, enabled, app, sUseInfo } = props;
-  
+
   // 需要优化性能的模块ID列表（PDA慢的界面）
   const performanceOptimizedModels = [
     '12710101117220510358930',
   ];
   const isPerformanceOptimized = performanceOptimizedModels.includes(sModelsId);
-  
+
   const slaveDataOld2 = slaveDataOld === undefined ? [] : slaveDataOld;
   const slaveData = dataSource.cloneWithRows(slaveDataOld2);
@@ -1990,10 +1990,13 @@ export default (ChildComponent) =&gt; {
     handleMobileFilterTable = (fieldConfig, tbName, record, newValue, bClear) => {
       const { slaveData = [] } = this.props;
       const fieldName = fieldConfig?.sName;
-      const inputVal = record?.[fieldName];
-      console.log('inputVal', inputVal, bClear);
+      // 优先使用传入的 newValue（搜索框传出的值），否则从 record 获取
+      const inputVal = newValue !== undefined && newValue !== '' ? newValue : record?.[fieldName];
+      console.log('搜索值:', inputVal, 'bClear:', bClear, 'newValue:', newValue);
+
+      // 清空搜索：bClear=true 或 inputVal 为空
       if (bClear || !inputVal || !inputVal.trim()) {
         this.props.onSaveState({ searchSlaveData: [] });
         return;