!2453 新增:商品选择居中,增加品牌属性

Merge pull request !2453 from 林三/goods_brand

src/Add-on/twoD2threeD/Modals/Rec2Br.less

@@ -56,11 +56,6 @@
         margin: 10px;
     }
 
-    .search-shop {
-        position: fixed;
-        transform: translate(-55%, 10%);
-    }
-
     .roomName{
         display: flex;
 

src/Add-on/twoD2threeD/R2BProcessComponent.tsx

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { CheckObjectType } from "../../Common/CheckoutVaildValue";
 import { userConfig } from '../../Editor/UserConfig';
 import { Input5Or4Component, Notes, SetBoardDataBlock } from "../../UI/Components/Board/BoardCommon";
-import { GoodsList, IGoodInfo } from '../../UI/MaterialEditor/GoodsList';
+import { IGoodInfo } from '../../UI/MaterialEditor/GoodsList';
+import { GoodsListDiv } from "../../UI/MaterialEditor/GoodsListDiv";
 import { SelectBrConfigName } from './R2BCommon';
 import { GetOptionState } from './R2bConfigComponent';
 import { Rec2BrStore } from './Rec2BrStore';
@@ -45,7 +46,7 @@ export class R2BProcessComponent extends React.Component<IR2BProcessComponentPro
                             onClick={() => this.showShops.set(true)}
                         >选择</button>
                         {
-                            this.showShops.get() && <GoodsList
+                            this.showShops.get() && <GoodsListDiv
                                 open={this.showShops}
                                 select={this.selectGoods}
                             />

src/UI/Components/Board/BoardFindCommon.tsx

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { EBoardKeyList } from '../../../Common/BoardKeyList';
 import { CheckObjectType } from '../../../Common/CheckoutVaildValue';
 import { safeEval } from '../../../Common/eval';
-import { GoodsList, IGoodInfo } from '../../MaterialEditor/GoodsList';
+import { IGoodInfo } from '../../MaterialEditor/GoodsList';
+import { GoodsListDiv } from '../../MaterialEditor/GoodsListDiv';
 import { DRILL_KEYS, ECompareType, IBoardFindOption } from '../../Store/BoardFindInterface';
 import { BoardFindStore } from '../../Store/BoardFindModifyStore';
 import { AnyObject, IUiOption } from "../../Store/OptionInterface/IOptionInterface";
@@ -227,14 +228,14 @@ export class MatColorCom extends React.Component<IMatColorComProps>
                     </div>
                 </div>
                 <div className="flex">
-                    <Button intent={Intent.PRIMARY} onClick={() => this.showShops.set(true)}>拾取</Button>
+                    <Button intent={Intent.PRIMARY} onClick={() => this.showShops.set(true)}>选择</Button>
                     <Button
                         intent={Intent.PRIMARY}
                         onClick={() => this.props.getBoardOption()}
                     >图中拾取</Button>
                 </div>
                 {
-                    this.showShops.get() && <GoodsList
+                    this.showShops.get() && <GoodsListDiv
                         open={this.showShops}
                         select={this.handleSelectGoods}
                     />

src/UI/Components/Board/BoardProcessModal.tsx

@@ -18,7 +18,8 @@ import { TemplateWineRackRecord } from '../../../DatabaseServices/Template/Progr
 import { CommandWrap } from '../../../Editor/CommandMachine';
 import { PromptStatus } from '../../../Editor/PromptResult';
 import { TempEditor } from '../../../Editor/TempEditor';
-import { GoodsList, IGoodInfo } from '../../MaterialEditor/GoodsList';
+import { IGoodInfo } from '../../MaterialEditor/GoodsList';
+import { GoodsListDiv } from '../../MaterialEditor/GoodsListDiv';
 import { BoardProcessOption } from "../../Store/OptionInterface/BoardProcessOption";
 import { IHightDrillOption, IUiOption } from "../../Store/OptionInterface/IOptionInterface";
 import { RightPanelStore } from '../../Store/RightPanelStore/RightPanelStore';
@@ -252,7 +253,7 @@ export class BoardProcessModal extends React.Component<BoardProcessProps, {}>{
                         onClick={() => this.showShops.set(true)}
                     >选择</button>
                     {
-                        this.showShops.get() && <GoodsList
+                        this.showShops.get() && <GoodsListDiv
                             open={this.showShops}
                             select={this.selectGoods}
                         />

src/UI/Components/Modal/ModalStyle/BoardFind.less

@@ -94,15 +94,6 @@
         .mat-color {
             position: relative;
 
-            .search-shop {
-                position: fixed;
-                transform: translate(-55%, -10%);
-
-                input {
-                    width: 100%;
-                }
-            }
-
             &>div:first-child {
                 &>div {
                     display: flex;

src/UI/Components/Modal/ModalStyle/BoardModal.less

@@ -254,29 +254,6 @@
         input {
             width: 6.5rem;
         }
-
-        .search-shop {
-            position : fixed;
-            transform: translate(-45%, -6%);
-
-            input {
-                width: 100%;
-            }
-
-            th{
-                padding       : auto;
-                text-align    : center;
-                min-width     : 55px;
-                vertical-align: middle;
-
-                .th_goods_thick{
-                    display: flex;
-                    align-items: center;
-                    width : 44px;
-                    margin: auto;
-                }
-            }
-        }
     }
 
     .br-mat>div>div:last-child {

src/UI/Components/Modal/ModalStyle/UpdateBoardInfo.less

@@ -112,16 +112,5 @@
             padding   : 0;
             text-align: center;
         }
-
-        .search-shop {
-            position: absolute;
-            left    : 0;
-            top     : 0;
-            right   : auto;
-
-            input {
-                width: 100%;
-            }
-        }
     }
 }

src/UI/Components/Modal/ModalsManage.ts

@@ -75,6 +75,11 @@ export class ModalManage
     {
         return this._List.get(this._currentFocusKey);
     }
+    set CurrentModalKey(key: string)
+    {
+        if (key !== this._currentFocusKey)
+            this._currentFocusKey = key;
+    }
     get CurrentModalKey()
     {
         return this._currentFocusKey;

src/UI/Css/style.less

@@ -1526,3 +1526,52 @@ img {
         }
     }
 }
+
+#GoodsListDiv{
+    .search-shop {
+        position : absolute;
+        z-index  : 35;
+        padding  : 10px;
+        font-size: 16px;
+        min-width: 1100px;
+        outline  : 1px solid #ccc;
+
+        input {
+            width: 100%;
+        }
+    
+        th{
+            padding       : auto;
+            text-align    : center;
+            min-width     : 55px;
+            vertical-align: middle;
+    
+            .th_goods_thick{
+                display: flex;
+                align-items: center;
+                width : 44px;
+                margin: auto;
+            }
+        }
+
+        .bp3-html-table.bp3-html-table-condensed td {
+            padding-top   : 1.5px;
+            padding-bottom: 1.5px;
+            padding-right : 1.5px;
+        }
+        table {
+            margin-top: 5px;
+            width     : 100%;
+            border    : 1px #dbdcdd solid;
+        }
+
+        .bp3-input-action {
+            top: 3px !important;
+            right: 3px;
+        }
+    
+        .pagination li {
+            padding-left: 11px;
+        }
+    }
+}

src/UI/MaterialEditor/GoodsList.tsx

@@ -1,4 +1,4 @@
-import { Card, HTMLTable, Icon, InputGroup } from '@blueprintjs/core';
+import { Button, Card, HTMLTable, Icon, InputGroup } from '@blueprintjs/core';
 import { IObservableValue, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -35,27 +35,38 @@ export class GoodsList extends React.Component<IGoodsListProps> {
     {
         this.handleSearch();
     }
+
     public render()
     {
         return (
-            this.props.open.get() &&
             <>
                 <Card className="search-shop"
                     tabIndex={-1}
                     onKeyUp={this.handleKeyDown}
                 >
-                    <InputGroup
+                    <div style={{ display: "flex" }}>
-                        placeholder="搜索要关联的商品"
+                        <div style={{ width: "96%" }}>
-                        value={this.searchStr}
+                            <InputGroup
-                        onChange={this.handleChange}
+                                placeholder="搜索要关联的商品"
-                        autoFocus
+                                value={this.searchStr}
-                        rightElement={<Icon icon="double-caret-vertical" />} />
+                                onChange={this.handleChange}
+                                autoFocus
+                                rightElement={<Icon icon="double-caret-vertical" />}
+                            />
+                        </div>
+                        <Button
+                            style={{ marginLeft: 15 }}
+                            icon="cross"
+                            onClick={this.handleHideSelect}
+                        />
+                    </div>
                     <HTMLTable bordered={true} interactive={true} condensed={true} striped={false}
                         style={{ lineHeight: 0.7 }}
                     >
                         <thead>
                             <tr>
                                 <th>编码</th>
+                                <th>品牌</th>
                                 <th>名称</th>
                                 <th>规格</th>
                                 <th onClick={this.handleOrderGoods}
@@ -99,12 +110,16 @@ export class GoodsList extends React.Component<IGoodsListProps> {
                                         specification: goods_spec,
                                     };
 
+                                    //品牌
+                                    let brand = v.goods_param.find(p => p.name === "品牌").value;
+
                                     return <tr
                                         key={v.goods_id}
                                         onClick={() => this.props.select(info)}
                                         style={{ lineHeight: "normal" }}
                                     >
                                         <td>{v.goods_sn}</td>
+                                        <td><OneLineText text={brand} /></td>
                                         <td><OneLineText text={v.goods_name} /></td>
                                         <td><OneLineText text={goods_spec} /></td>
                                         <td>{thick ? thick.value : ""}</td>

src/UI/MaterialEditor/GoodsListDiv.tsx

@@ -0,0 +1,86 @@
+import { IObservableValue } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { begin } from 'xaop';
+import { app } from '../../ApplicationServices/Application';
+import { KeyBoard } from '../../Common/KeyEnum';
+import { GoodsList, IGoodInfo } from './GoodsList';
+
+const GOODS_LIST_DIV_ID = "GoodsListDiv";
+
+interface IGoodsListProps
+{
+    select: (good: IGoodInfo) => void;
+    open: IObservableValue<boolean>;
+}
+
+@observer
+export class GoodsListDiv extends React.Component<IGoodsListProps> {
+    _Event: Function;
+    _StateContainer: HTMLElement;
+    _CurrentModalKey = "";
+
+    constructor(props)
+    {
+        super(props);
+        this._StateContainer = document.createElement('div');
+        this._StateContainer.id = GOODS_LIST_DIV_ID;
+        this._StateContainer.style.zIndex = "36";
+        document.getElementById('modal').appendChild(this._StateContainer);
+
+        this._StateContainer.style.position = "absolute";
+
+        if (window.screen.width <= 1100)
+            this._StateContainer.style.left = '0px';
+        else
+            this._StateContainer.style.left = `calc(50vw - 550px)`;
+
+        if (window.screen.height <= 620)
+            this._StateContainer.style.top = `0px`;
+        else
+            this._StateContainer.style.top = `calc(50vh - 300px)`;
+
+
+        ReactDOM.render(<GoodsList
+            open={this.props.open}
+            select={this.props.select}
+        />, this._StateContainer);
+    }
+
+    componentDidMount()
+    {
+        this._CurrentModalKey = app.Editor.ModalManage.CurrentModalKey;
+        app.Editor.ModalManage.CurrentModalKey = GOODS_LIST_DIV_ID;
+
+        this._Event = begin(app.Editor.ModalManage, app.Editor.ModalManage.OnKeyDown, (e: KeyboardEvent) =>
+        {
+            if (e.keyCode === KeyBoard.Escape)
+            {
+                app.Editor.ModalManage.stopKeyDownEvent = true;
+                e.stopPropagation();
+            }
+        });
+    }
+
+    componentWillUnmount()
+    {
+        app.Editor.ModalManage.CurrentModalKey = this._CurrentModalKey;
+        document.getElementById('modal').removeChild(this._StateContainer);
+        this._StateContainer = undefined;
+        this._CurrentModalKey = "";
+        if (this._Event)
+        {
+            this._Event();
+            this._Event = null;
+        }
+    }
+
+    public render()
+    {
+        return (
+            <>
+            </>
+        );
+    }
+}

src/UI/MaterialEditor/Material.less

@@ -134,41 +134,4 @@
             height        : 22px;
         }
     }
-    .search-shop {
+}
-        position: fixed;
-        transform: translate(-70%, 55%);
-    }
-
-}
-
-.search-shop {
-    z-index  : 35;
-    padding  : 10px;
-    font-size: 16px;
-    width    : 1000px;
-    outline  : 1px solid #ccc;
-
-    .bp3-html-table.bp3-html-table-condensed td {
-        padding-top   : 1.5px;
-        padding-bottom: 1.5px;
-        padding-right : 1.5px;
-    }
-
-    table {
-        margin-top: 5px;
-        width     : 100%;
-        border    : 1px #dbdcdd solid;
-    }
-
-    input {
-        height: 2.5rem !important;
-    }
-
-    .bp3-input-action {
-        top: 5px !important;
-    }
-
-    .pagination li {
-        padding-left: 11px;
-    }
-}

src/UI/MaterialEditor/MaterialLinkShop.tsx

@@ -2,11 +2,12 @@ import { Button, Intent } from "@blueprintjs/core";
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { MaterialStore } from "../Store/MaterialStore";
-import { GoodsList, IGoodInfo } from "./GoodsList";
-import { SetBoardDataBlock } from "../Components/Board/BoardCommon";
 import { CheckObjectType } from "../../Common/CheckoutVaildValue";
+import { SetBoardDataBlock } from "../Components/Board/BoardCommon";
 import { AppToaster } from "../Components/Toaster";
+import { MaterialStore } from "../Store/MaterialStore";
+import { IGoodInfo } from "./GoodsList";
+import { GoodsListDiv } from "./GoodsListDiv";
 
 @inject('store')
 @observer
@@ -35,7 +36,7 @@ export class MaterialLinkShopId extends React.Component<{ store?: MaterialStore;
         AppToaster.show({
             message: "如果你将这个材质赋予到板件,我们会把材质的板材信息拷贝到板件中",
             timeout: 2500,
-        });
+        }, "MaterialShopSelect");
     };
     componentDidMount()
     {
@@ -64,7 +65,7 @@ export class MaterialLinkShopId extends React.Component<{ store?: MaterialStore;
                     />
                 </div>
                 {
-                    this.showShops.get() && <GoodsList
+                    this.showShops.get() && <GoodsListDiv
                         open={this.showShops}
                         select={this.handleSelectGood}
                     />