1.增加手机端单据，主表搜索的全部逻辑

Min
1 parent 09c035a7
Showing 5 changed files with 108 additions and 21 deletions
src/components/Common/commonBusiness.js
src/mobile/common/CommobileComponent.js
src/mobile/common/CommobileSubBill.js
src/mobile/common/CommobileSubBillEvent.js
src/mobile/mobile.less
@@ -1094,7 +1094,7 @@ export function getKeyUpEvent(name, sFieldName, tableConfig, masterData, tableDa
       const sAssignField = tableConfig.gdsconfigformslave[iConfigIndex].sOnChangeAssignField;
       // eslint-disable-next-line prefer-destructuring
       const sButtonParam = tableConfig.gdsconfigformslave[iConfigIndex].sButtonParam; /* 设置多级联动 */
-      console.log('sAssignField:', sAssignField);
+
       /* keyUp联动其他表 */
       if (commonUtils.isNotEmptyObject(sAssignField) && (sAssignField.includes('@@@:') || sAssignField.includes(';,'))) {
         const sAssignFieldObj = sAssignField.split(';,');
@@ -387,9 +387,9 @@ export default class CommonComponent extends Component {
   }
   /* 主表过滤从表  */
-  handleMobileFilterTable = () => {
+  handleMobileFilterTable = (e, bClear) => {
     console.log('主表过滤从表', this.props.record);
-    this.props.onMobileFilterTable(this.props.showConfig, this.props.name, this.props.record);
+    this.props.onMobileFilterTable(this.props.showConfig, this.props.name, this.props.record, '', bClear);
   }
   /**   渲染   */
@@ -478,13 +478,62 @@ 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) {
-          input = <div style={{ position: 'relative' }}><InputItem clear {...outFormItemProps} >{sTitle}</InputItem><span className={styles.spanStyle} onClick={(e) => this.handleMobileFilterTable(e)}><img className={styles.scanStyle} src={search} style={!this.state.enabled ? { opacity: 0.8 } : { opacity: 1 }} alt="scan" /></span></div>;
-        }  else {
+          // 封装回车处理函数，复用点击搜索的逻辑
+          const handleSearchEnter = e => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              // 和右侧放大镜点击执行同一个搜索方法
+              this.handleMobileFilterTable(e);
+            }
+          };
+
+          // 自定义清空方法
+          const handleClear = (e) => {
+            // 构造空值事件，同步更新受控value newValue
+            const emptyEvent = { target: { value: '' } };
+            this.handleSelectOptionEvent();
+            // 清空后执行搜索刷新列表
+            this.handleMobileFilterTable(e, true);
+          };
+          // 输入框清空回调
+          const handleClearInput = () => {
+            // 清空后同样执行搜索，刷新列表
+            console.log("清空", 111);
+            this.handleMobileFilterTable();
+          };
+          input = (
+            <div style={{ position: "relative", width: "95%" }}>
+              <InputItem
+                // clear
+                {...outFormItemProps}
+                onKeyDown={handleSearchEnter}
+                // 关键：绑定清空事件
+                onClear={handleClearInput}
+              >
+                {sTitle}
+              </InputItem>
+              {/* 自定义清空 × 按钮：有输入内容才显示 */}
+              {newValue && (
+                <span
+                  className={styles.clearStyle}
+                  onClick={(e) =>handleClear(e)}
+                  style={{ right: 45 }} // 定位在放大镜左边，错开位置
+                >
+          <span style={{ fontSize: 30, color: '#ccc' }}>×</span>
+        </span>
+              )}
+              <span className={styles.searchStyle} onClick={e => this.handleMobileFilterTable(e)}>
+                <img className={styles.scanStyle} src={search} style={!this.state.enabled ? { opacity: 0.8 } : { opacity: 1 }} alt="scan" />
+              </span>
+
+            </div>
+          );
+        } else {
           input = (<InputItem id={this.props.showConfig.sName} clear {...outFormItemProps} >{sTitle}</InputItem>);
         }
       }
-    } else if (this.firstDataIndex === 'd') {
-      outFormItemProps.moneyKeyboardAlign = 'left';
+    } else if (this.firstDataIndex === "d") {
+      outFormItemProps.moneyKeyboardAlign = "left";
       outFormItemProps.moneyKeyboardWrapProps = moneyKeyboardWrapProps;
       input = (<InputItem clear {...outFormItemProps} type="digit" >{sTitle}</InputItem>);
     } else if (this.firstDataIndex === 't') {
@@ -2256,14 +2256,32 @@ const CommobileBillComponent = createForm()(CommobileBill);
 const TabComponentSlave = (props) => {
-  const { masterConfig, masterData, slaveData: slaveDataOld, slaveConfig, sModelsId, enabled, app, sUseInfo, searchSlaveData:searchSlaveDataOld = [] } = props;
+  const { masterConfig, masterData, slaveData: slaveDataOld, slaveConfig, sModelsId, enabled, app, sUseInfo, searchSlaveData:searchSlaveDataOld = [], bSearchModel } = props;
-  const slaveDataOld2 = slaveDataOld === undefined ? [] : slaveDataOld;
-  let slaveData = dataSource.cloneWithRows(slaveDataOld2);
-  if(commonUtils.isNotEmptyArr(searchSlaveDataOld)){
-    slaveData =  dataSource.cloneWithRows(searchSlaveDataOld);
+
+  const slaveDataOld2 = slaveDataOld || [];
+  let showList = slaveDataOld2;
+
+  if (commonUtils.isNotEmptyArr(searchSlaveDataOld)) {
+    const sIdSet = new Set();
+    for (const item of searchSlaveDataOld) {
+      if (item?.sId != null) sIdSet.add(item.sId);
+    }
+
+    showList = [];
+    for (const row of slaveDataOld2) {
+      if (sIdSet.has(row.sId)) {
+        showList.push(row);
+      }
+    }
+   }else if (searchSlaveDataOld === null){
+    showList = [];
   }
+
+  const slaveData = dataSource.cloneWithRows(showList);
+
+
   const style = {
     display: 'flex',
     justifyContent: 'center',
@@ -2290,7 +2308,7 @@ const TabComponentSlave = (props) =&gt; {
     justifyContent: 'space-between',
     background: ' #f0f0f0',
   };
-  console.log('aaa', props);
+
   const row = (rowData, sectionID, rowID) => {
     return (
@@ -1983,19 +1983,27 @@ export default (ChildComponent) =&gt; {
           return cellVal.includes(targetVal);
         });
       });
-
-      return filterList;
+      console.log('过滤逻辑', filterList)
+      return filterList.length > 0 ? filterList : null;
     }
-    handleMobileFilterTable = (fieldConfig, tbName, record) => {
-       const{ slaveData = []}= this.props;
+    handleMobileFilterTable = (fieldConfig, tbName, record, newValue, bClear) => {
+      const { slaveData = [] } = this.props;
       const fieldName = fieldConfig?.sName;
       const inputVal = record?.[fieldName];
-      // 原始子表数据
-      // 执行过滤
+
+      console.log('inputVal', inputVal, bClear);
+
+      if (bClear || !inputVal || !inputVal.trim()) {
+        this.props.onSaveState({ searchSlaveData: [] });
+        return;
+      }
+
+      // 始终基于原始 slaveData 过滤（保证修改后的数据也能被搜到）
+      // 由于对象引用特性：searchSlaveData 中的对象和 slaveData 是同一个引用
+      // 所以修改 searchSlaveData 中的数据，slaveData 也会同步变化
       const filterResult = this.handleFilterData(fieldConfig, slaveData, inputVal);
-      console.log('过滤后列表', filterResult);
-      // 更新视图
+      console.log('过滤结果', filterResult);
       this.props.onSaveState({ searchSlaveData: filterResult });
     }
@@ -257,6 +257,18 @@
   top: 3%;
   right: 12%;
 }
+.searchStyle{
+  position: absolute;
+  top: 16%;
+  right: -3%;
+
+}
+.clearStyle{
+  position: absolute;
+  top: -26%;
+  right: 5%;
+
+}
 .requireStyle{
   position: absolute;
   height: 4px;