!2205 优化:加工组支持查询筛选

src/UI/Components/Modal/ProcessingGroupModal.tsx

@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { begin, end } from "xaop";
+import { CompareIsEqual } from "../../../Add-on/BoardFindModify";
 import { app } from "../../../ApplicationServices/Application";
 import { arrayRemove, arrayRemoveIf } from "../../../Common/ArrayExt";
 import { CommandNames } from "../../../Common/CommandNames";
@@ -20,6 +21,7 @@ import { CommandWrap } from "../../../Editor/CommandMachine";
 import { PromptStatus } from "../../../Editor/PromptResult";
 import { SelectSetBase } from "../../../Editor/SelectBase";
 import '../../Css/ProcessingGroupModal.less';
+import { ECompareType } from "../../Store/BoardFindInterface";
 import { IConfigStore } from "../../Store/BoardStore";
 import { userConfigStore } from "../../Store/UserConfigStore";
 import { BoardModalType } from "../Board/BoardModalType";
@@ -119,6 +121,9 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
     private getNodeID: NodeIDGenerator = new NodeIDGenerator();//树节点id生成器
     //移除注入
     private removeFuncs: Function[] = [];
+    private _SearchTypeInputRef = React.createRef<HTMLInputElement>(); //加工类型搜索框
+    private _SearchGroupInputRef = React.createRef<HTMLInputElement>(); //加工组搜索框
+
     constructor(props)
     {
         super(props);
@@ -220,8 +225,20 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
         };
         let rightNodes: ITreeNode[] = [];//右侧节点
         let leftNodes: ITreeNode[] = [];//左侧节点
+
+        //搜索加工组类型内容
+        let newPGCategoryMap: Map<string, number> = new Map();
+        if (this._SearchTypeInputRef?.current?.value)
+            for (let pgCategory of this.pgCategoryMap)
+            {
+                if (CompareIsEqual(pgCategory[0], this._SearchTypeInputRef.current.value, ECompareType.Include))
+                    newPGCategoryMap.set(pgCategory[0], pgCategory[1]);
+            }
+        else
+            newPGCategoryMap = this.pgCategoryMap;
+
         //为每个组类别创建节点
-        for (let [pgs, pgnum] of this.pgCategoryMap)
+        for (let [pgs, pgnum] of newPGCategoryMap)
         {
             let leftTN: ITreeNode = {
                 id: this.getNodeID.nextID,
@@ -308,7 +325,12 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
         wineTempData.forEach(wt => AddToRightNode(undefined, wt.brarr, wt.brNodeArr, "酒格"));
         latTempData.forEach(lt => AddToRightNode(undefined, lt.brarr, lt.brNodeArr, "格子抽"));
 
-        this.setState({ rightNodes: rightNodes.filter(n => n.childNodes.length > 0) }); //
+        //搜索加工组搜索框内容
+        let searchGroupInputRefValue = this._SearchGroupInputRef?.current?.value;
+        if (searchGroupInputRefValue)
+            rightNodes = rightNodes.filter(node => CompareIsEqual(node.nodeData as string, searchGroupInputRefValue, ECompareType.Include));
+
+        this.setState({ rightNodes: rightNodes.filter(n => n.childNodes.length > 0) });
         this.RecoverSelectedNode(rightNodes, leftNodes);
         return leftNodes;
     };
@@ -639,6 +661,8 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
 
     private ShowSelectBoards = async () =>
     {
+        //初始化搜索内容
+        this._SearchGroupInputRef.current.value = "";
         this.ClearSelect();
         app.Editor.ModalManage.ToggleShow();
         app.Editor.MaskManage.Clear();
@@ -680,6 +704,9 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
         if (this.props.store.selectedLeftNodeSet.size === 0)
             return;
 
+        //初始化搜索内容
+        this._SearchGroupInputRef.current.value = "";
+
         this.ClearSelect();
         app.Editor.ModalManage.ToggleShow();
         app.Editor.MaskManage.Clear();
@@ -780,8 +807,13 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
                         <div className={Classes.DIALOG_BODY + " " + Classes.CARD} >
                             <div>
                                 <div className="left">
-                                    <div className="title">
-                                        加工种类
+                                    <div className="processingGroupTitle">
+                                        <div className="titleText"> 加工种类</div>
+                                        <input className="searchInput"
+                                            ref={this._SearchTypeInputRef}
+                                            placeholder="搜索..."
+                                            onChange={() => { this.setState({ nodes: this.parseNodes() }); }}
+                                        />
                                     </div>
                                     <div className="list">
                                         <Tree
@@ -799,8 +831,13 @@ export class ProcessingGroupModal extends React.Component<{ store: ProcessingGro
                                 </div>
                                 <div className="right">
                                     <div className="left">
-                                        <div className="title">
-                                            加工组列表
+                                        <div className="processingGroupTitle">
+                                            <div className="titleText">  加工组列表 </div>
+                                            <input className="searchInput"
+                                                ref={this._SearchGroupInputRef}
+                                                placeholder="搜索..."
+                                                onChange={() => { this.parseNodes(); }}
+                                            />
                                         </div>
                                         <div className="list">
                                             <Tree

src/UI/Css/ProcessingGroupModal.less

@@ -27,7 +27,7 @@
     .bp3-dialog-body {
         display       : flex;
         flex-direction: column;
-        width         : 430px;
+        width         : 450px;
         padding       : 10px;
 
         >div {
@@ -37,12 +37,24 @@
         }
 
         .left {
-            width: 120px;
+            width: 140px;
 
-            .title {
-                text-align : center;
-                line-height: 30px;
-                height     : 30px;
+            .processingGroupTitle {
+                display        : flex;
+                align-items    : center;
+                justify-content: center;
+
+                .titleText {
+                    text-align  : center;
+                    line-height : 30px;
+                    height      : 30px;
+                    margin-right: 3px;
+                }
+
+                .searchInput {
+                    width : 80px;
+                    height: 20px;
+                }
             }
 
             .list {

src/UI/Store/BoardFindInterface.ts

@@ -120,5 +120,5 @@ export enum ECompareType
     UnEqual = "!=",
     Greater = ">=",
     Less = "<=",
-    Include = "//",
+    Include = "//", //模糊匹配
 }