From 7878c097e5a924eb08a5be1db7a72dafd09d254f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=AF=97=E6=B4=A5?= <2723065175@qq.com>
Date: Mon, 4 Mar 2024 06:24:09 +0000
Subject: [PATCH] =?UTF-8?q?!2492=20=E6=96=B0=E5=A2=9E:=E5=A4=8D=E5=90=88?=
 =?UTF-8?q?=E5=AE=9E=E4=BD=93=E5=B1=9E=E6=80=A7=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=88=BF=E5=90=8D=E6=9F=9C=E5=90=8D=E6=8B=BE=E5=8F=96?=
 =?UTF-8?q?,=E9=87=8D=E6=9E=84=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/UI/Components/Modal/HardwareModal.tsx     |  27 --
 .../RightPanel/CommonMetalPanel.tsx           | 271 ++++++++++++------
 .../RightPanel/CompositeMetalsPanel.tsx       |   2 +-
 src/UI/Components/RightPanel/RightPanel.less  | 123 ++++++--
 4 files changed, 281 insertions(+), 142 deletions(-)

diff --git a/src/UI/Components/Modal/HardwareModal.tsx b/src/UI/Components/Modal/HardwareModal.tsx
index 3d155d018..efd948e2e 100644
--- a/src/UI/Components/Modal/HardwareModal.tsx
+++ b/src/UI/Components/Modal/HardwareModal.tsx
@@ -2,11 +2,8 @@ import { Button, Classes, Icon, Intent } from '@blueprintjs/core';
 import * as React from 'react';
 import { MathUtils } from 'three';
 import { app } from '../../../ApplicationServices/Application';
-import { EBoardKeyList } from '../../../Common/BoardKeyList';
-import { Board } from '../../../DatabaseServices/Entity/Board';
 import { HardwareTopline } from '../../../DatabaseServices/Hardware/HardwareTopline';
 import { CommandWrap } from '../../../Editor/CommandMachine';
-import { PromptStatus } from '../../../Editor/PromptResult';
 import { BaseHardwareStore } from '../../Store/RightPanelStore/HardwareStore';
 import { BoardModalType } from "../Board/BoardModalType";
 import { Config_ModalType, UserConfigComponent } from '../Board/UserConfigComponent';
@@ -60,11 +57,6 @@ export function GetHardwareModal(Com, props: IMetalsModal)
                         <div className={Classes.DIALOG_FOOTER} >
                             <UserConfigComponent store={store} type={type} isNotUpdateStore={true} configType={Config_ModalType.UserConfigModal} />
                             <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                                <Button
-                                    className={Classes.INTENT_SUCCESS}
-                                    text="拾取"
-                                    onClick={this.getOption}
-                                />
                                 <Button
                                     className={Classes.INTENT_SUCCESS}
                                     text="确定"
@@ -108,24 +100,5 @@ export function GetHardwareModal(Com, props: IMetalsModal)
             props.store.Entity = undefined;
             app.Editor.ModalManage.Destory();
         };
-        public getOption = async () =>
-        {
-            app.Editor.ModalManage.ToggleShow();
-            app.Editor.MaskManage.Clear();
-            let enRes = await app.Editor.GetEntity({
-                Msg: "选择要拾取房名柜名的板件",
-                Filter: { filterTypes: [Board] }
-            });
-
-            if (enRes.Status === PromptStatus.OK)
-            {
-                let option = props.store.option;
-                const data = (enRes.Entity as Board).BoardProcessOption;
-                option[EBoardKeyList.RoomName] = data[EBoardKeyList.RoomName];
-                option[EBoardKeyList.CabinetName] = data[EBoardKeyList.CabinetName];
-            }
-            app.Editor.MaskManage.ShowMask();
-            app.Editor.ModalManage.ToggleShow();
-        };
     };
 }
diff --git a/src/UI/Components/RightPanel/CommonMetalPanel.tsx b/src/UI/Components/RightPanel/CommonMetalPanel.tsx
index cd6e107d1..597e83611 100644
--- a/src/UI/Components/RightPanel/CommonMetalPanel.tsx
+++ b/src/UI/Components/RightPanel/CommonMetalPanel.tsx
@@ -9,10 +9,12 @@ import { EBoardKeyList } from '../../../Common/BoardKeyList';
 import { CheckObjectType } from '../../../Common/CheckoutVaildValue';
 import { CommandNames } from '../../../Common/CommandNames';
 import { FixedNotZero } from '../../../Common/Utils';
+import { Board } from '../../../DatabaseServices/Entity/Board';
 import { Entity } from '../../../DatabaseServices/Entity/Entity';
 import { HardwareTopline } from '../../../DatabaseServices/Hardware/HardwareTopline';
 import { ProcessingGroupRecord } from '../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord';
 import { CommandWrap } from '../../../Editor/CommandMachine';
+import { PromptStatus } from '../../../Editor/PromptResult';
 import { BaseHardwareStore } from '../../Store/RightPanelStore/HardwareStore';
 import { ToasterInput } from '../Toaster';
 
@@ -25,10 +27,6 @@ export interface ICommonMetalPanelProps
 
 @observer
 export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
-    private par = [["房间名:", EBoardKeyList.RoomName], ["柜名:", EBoardKeyList.CabinetName], ["单位:", "unit"]];
-    private pars1 = [["价格表达式:", "actualExpr"]];
-    private pars2 = [["型号:", "model"], ["厂家:", "factory"], ["品牌:", "brand"], ["规格:", "spec"]];
-    private pars3 = [["材质:", EBoardKeyList.Mat], ["颜色:", "color"]];
     private size = new Vector3();
     private length: string;
 
@@ -72,43 +70,67 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
         }, CommandNames.删除加工组);
     };
 
+    private getOption = async () =>
+    {
+        app.Editor.ModalManage.ToggleShow();
+        app.Editor.MaskManage.Clear();
+
+        await CommandWrap(async () =>
+        {
+            let enRes = await app.Editor.GetEntity({
+                Msg: "选择板件",
+                Filter: { filterTypes: [Board] }
+            });
+
+            if (enRes.Status === PromptStatus.OK)
+            {
+                const { store } = this.props;
+                const data = (enRes.Entity as Board).BoardProcessOption;
+                store.option[EBoardKeyList.RoomName] = data[EBoardKeyList.RoomName];
+                store.option[EBoardKeyList.CabinetName] = data[EBoardKeyList.CabinetName];
+            }
+        }, "选择板件属性");
+
+        if (this.props.store.Entity)
+        {
+            app.Editor.MaskManage.ShowMask();
+        }
+        app.Editor.ModalManage.ToggleShow();
+    };
+
     componentDidMount(): void
     {
         this.updateTags();
     }
 
-    UNSAFE_componentWillMount()
+    constructor(props)
     {
-        if (this.props.store.Entity)
+        super(props);
+        const { store, isTopline } = this.props;
+        if (store.Entity)
         {
-            this.par.push(["实体名:", "name"], ["备注", "comments"]);
-            let box = this.props.store.Entity.BoundingBoxInOCS;
+            let box = store.Entity.BoundingBoxInOCS;
             box.getSize(this.size);
         }
-        if (this.props.isTopline)
+        if (isTopline)
         {
-            this.pars1[0][0] = "每米单价";
-            this.length = FixedNotZero((this.props.store.Entity as HardwareTopline).MaxLength, 2);
+            this.length = FixedNotZero((store.Entity as HardwareTopline).MaxLength, 2);
         }
     }
-    public render()
+
+    private RoomAndCabinetName = () =>
     {
-        const { otherOptions, option } = this.props.store;
+        const { option } = this.props.store;
+        const roomAndCabinetName = [["房间名:", EBoardKeyList.RoomName], ["柜名:", EBoardKeyList.CabinetName]];
+
         return (
-            <div className="common-matal">
-                {
-                    !this.props.store.Entity &&
-                    <Label className={Classes.INLINE}>
-                        <span>实体名:</span>
-                        <input tabIndex={1} type="text" className={Classes.INPUT} value={option.name} onChange={e => option.name = e.target.value} />
-                    </Label>
-                }
-                <div className="metal-type">
+            <div className="room-cabinet-name" style={{ display: "flex" }}>
+                <div>
                     {
-                        this.par.map(([t, k]) =>
+                        roomAndCabinetName.map(([t, k]) =>
                         {
                             return (
-                                <Label className={Classes.INLINE} key={k}>
+                                <Label className={`${Classes.INLINE}`} key={k}>
                                     <span>{t}</span>
                                     <input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
                                 </Label>
@@ -116,6 +138,22 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
                         })
                     }
                 </div>
+                <button
+                    className="bp3-button bp3-intent-success"
+                    onClick={this.getOption}
+                >拾取</button>
+            </div>
+        );
+    };
+
+    private ProcessingGroupAndPrice = () =>
+    {
+        const { isTopline } = this.props;
+        const { option } = this.props.store;
+        const price = isTopline ? [["每米单价:", "actualExpr"]] : [["价格表达式:", "actualExpr"]];
+
+        return (
+            <>
                 <label className="bp3-label bp3-inline .modifier" style={{ display: "flex" }}>
                     <span style={{ width: 65 }}>加工组:</span>
                     <div style={{ display: "inline-flex", flex: 1, minWidth: 120 }}>
@@ -160,40 +198,10 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
                                     ""
                             }
                         </div>
-                        {/* todo添加加工组 */}
                     </Alert>
                 </label>
                 {
-                    this.props.isTopline &&
-                    <div className="metal-type">
-                        <Label>
-                            <span>旋转轮廓角度:</span>
-                            <input
-                                tabIndex={1}
-                                style={{ width: "50%", marginTop: 0 }}
-                                className={Classes.INPUT}
-                                value={this.props.store.rotation}
-                                onChange={e => this.props.store.rotation = e.target.value}
-                            />
-                        </Label>
-                        {
-                            [["每段加长:", "addLen"]].map(([t, k]) =>
-                                <Label key={k}>
-                                    <span>{t}</span>
-                                    <input
-                                        tabIndex={1}
-                                        style={{ width: "50%", marginTop: 0 }}
-                                        className={Classes.INPUT}
-                                        value={option[k]}
-                                        onChange={e => option[k] = e.target.value}
-                                    />
-                                </Label>
-                            )
-                        }
-                    </div>
-                }
-                {
-                    this.pars1.map(([t, k]) =>
+                    price.map(([t, k]) =>
                     {
                         return (
                             <Label className={Classes.INLINE} style={{ display: "inline-flex", width: "100%" }} key={k}>
@@ -203,48 +211,39 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
                         );
                     })
                 }
-                <div className="metal-type">
-                    {
-                        this.pars2.map(([t, k]) =>
-                        {
-                            return (
-                                <Label className={Classes.INLINE} key={k}>
-                                    <span>{t}</span>
-                                    <input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
-                                </Label>
-                            );
-                        })
-                    }
-                    {
-                        !this.props.isTopline &&
-                        <Label className={Classes.INLINE}>
-                            <span>数量</span>
-                            <ToasterInput
-                                type={CheckObjectType.None}
-                                option={option}
-                                optKey="count"
-                            />
-                        </Label>
-                    }
-                </div>
+            </>
+        );
+    };
+
+    private MetalParam = () =>
+    {
+        const { option } = this.props.store;
+        const pars2 = [["型号:", "model"], ["厂家:", "factory"], ["品牌:", "brand"], ["规格:", "spec"]];
+
+        return (
+            <div className="metal-param">
                 {
-                    this.props.store.Entity && !this.props.isTopline &&
-                    <div className="metal-type">
-                        {
-                            this.pars3.map(([t, k]) =>
-                            {
-                                return (
-                                    <Label className={Classes.INLINE} key={k}>
-                                        <span>{t}</span>
-                                        <input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
-                                    </Label>
-                                );
-                            })
-                        }
-                    </div>
+                    pars2.map(([t, k]) =>
+                    {
+                        return (
+                            <Label className={`metal-label ${Classes.INLINE}`} key={k}>
+                                <span>{t}</span>
+                                <input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
+                            </Label>
+                        );
+                    })
                 }
+            </div>
+        );
+    };
+
+    private EntityInfo = () =>
+    {
+        const { otherOptions, Entity } = this.props.store;
+        return (
+            <>
                 {
-                    this.props.store.Entity &&
+                    Entity &&
                     <div className="center">
                         <span>实体长:{this.size.x.toFixed(2)}</span>
                         <span>实体宽:{this.size.y.toFixed(2)}</span>
@@ -270,6 +269,90 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
                         })
                     }
                 </ul>
+            </>
+        );
+    };
+
+    render()
+    {
+        const { store, isTopline } = this.props;
+        const { option, Entity } = store;
+        const isRightMetalPanel = !Entity;
+        const metalTypeFields = isRightMetalPanel ? [["实体名:", "name"], ["单位:", "unit"]] : [["单位:", "unit"], ["实体名:", "name"], ["备注:", "comments"]];
+        const materialAndColor = [["材质:", EBoardKeyList.Mat], ["颜色:", "color"]];
+
+        return (
+            <div className={`common-matal_${isTopline ? 1 : isRightMetalPanel ? 2 : 3}`}>
+                {this.RoomAndCabinetName()}
+                <div className="metal-param_name">
+                    {
+                        metalTypeFields.map(([t, k]) => (
+                            <Label className={`metal-label ${Classes.INLINE}`} key={k}>
+                                <span>{t}</span>
+                                <input
+                                    tabIndex={1}
+                                    type="text"
+                                    className={Classes.INPUT}
+                                    value={option[k]}
+                                    onChange={(e) => (option[k] = e.target.value)}
+                                />
+                            </Label>
+                        ))
+                    }
+                </div>
+                {
+                    isTopline && (
+                        <div className="metal-param">
+                            <Label className="metal-label">
+                                <span>旋转轮廓角度:</span>
+                                <input
+                                    tabIndex={1}
+                                    style={{ width: "50%", marginTop: 0 }}
+                                    className={Classes.INPUT}
+                                    value={store.rotation}
+                                    onChange={(e) => (store.rotation = e.target.value)}
+                                />
+                            </Label>
+                            {[["每段加长:", "addLen"]].map(([t, k]) => (
+                                <Label className="metal-label" key={k}>
+                                    <span>{t}</span>
+                                    <input
+                                        tabIndex={1}
+                                        style={{ width: "50%", marginTop: 0 }}
+                                        className={Classes.INPUT}
+                                        value={option[k]}
+                                        onChange={(e) => (option[k] = e.target.value)}
+                                    />
+                                </Label>
+                            ))}
+                        </div>
+                    )
+                }
+                {this.ProcessingGroupAndPrice()}
+                {this.MetalParam()}
+                {!isTopline && <Label className={`metal-label_count ${Classes.INLINE}`}>
+                    <span>数量:</span>
+                    <ToasterInput type={CheckObjectType.None} option={option} optKey="count" />
+                </Label>}
+                {!isTopline && !isRightMetalPanel && (
+                    <div className="metal-param">
+                        {
+                            materialAndColor.map(([t, k]) => (
+                                <Label className={`metal-label ${Classes.INLINE}`} key={k}>
+                                    <span>{t}</span>
+                                    <input
+                                        tabIndex={1}
+                                        type="text"
+                                        className={Classes.INPUT}
+                                        value={option[k]}
+                                        onChange={(e) => (option[k] = e.target.value)}
+                                    />
+                                </Label>
+                            ))
+                        }
+                    </div>
+                )}
+                {this.EntityInfo()}
             </div>
         );
     }
diff --git a/src/UI/Components/RightPanel/CompositeMetalsPanel.tsx b/src/UI/Components/RightPanel/CompositeMetalsPanel.tsx
index c21f004bd..8c20a192f 100644
--- a/src/UI/Components/RightPanel/CompositeMetalsPanel.tsx
+++ b/src/UI/Components/RightPanel/CompositeMetalsPanel.tsx
@@ -40,7 +40,7 @@ export class CompositeMatalPanel extends React.Component<ICompositeMatalPanelPan
             <>
                 <div className="metals">
                     <div>
-                        <Label className={Classes.INLINE}>
+                        <Label className={`metal-type ${Classes.INLINE}`}>
                             <span>类型</span>
                             <HTMLSelect
                                 value={option.type}
diff --git a/src/UI/Components/RightPanel/RightPanel.less b/src/UI/Components/RightPanel/RightPanel.less
index 62ba69d61..81c5e4bc1 100644
--- a/src/UI/Components/RightPanel/RightPanel.less
+++ b/src/UI/Components/RightPanel/RightPanel.less
@@ -341,6 +341,11 @@
 
 #RightPanel,
 #modal {
+    .bp3-label {
+        line-height: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+
     .metal-root {
         .cf-select {
             width: calc(100% + 20px);
@@ -372,7 +377,20 @@
         }
     }
 
-    .common-matal {
+    .metal-type {
+        width: 45%;
+        display: flex;
+        justify-content: space-between;
+
+        &>:nth-child(2) {
+            width: 70%;
+        }
+    }
+
+    .common-matal_1,
+    .common-matal_2,
+    .common-matal_3
+    {
         &>label {
             display: flex;
             align-items: center;
@@ -426,41 +444,106 @@
                 }
             }
         }
-    }
 
-    & .metal-type {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
+        .room-cabinet-name{
+            display: flex;
 
-        &>label {
+            &>:first-child {
+                width: 45%;
+
+                .bp3-label{
+                    display: flex;
+
+                    span {
+                        flex:1
+                    }
+
+                    input {
+                        margin: 0;
+                        width: 70%;
+                    }
+                }
+            }
+
+            button {
+                margin-left: 2px;
+                width: 30px;
+                height: 42px;
+            }
+        }
+
+        .metal-param,
+        .metal-param_name
+        {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+
+        .metal-label {
             width: 45%;
             display: flex;
-            align-items: center;
 
-            &>span:first-child {
-                flex: 1;
-                white-space: nowrap;
+            span {
+                flex:1
             }
 
-            &>span:last-child:not(.bp3-control-indicator) {
-                width: 70%;
+            input {
                 margin: 0;
+                width: 70%;
+            }
+        }
+    }
+
+    .common-matal_2 {
+        .room-cabinet-name {
+            &>:first-child {
+                width: 70%;
+            }
+
+            button {
+                height: 45px;
+            }
+        }
+
+        .metal-param_name {
+            display: flex;
+            flex-direction: column;
+
+            .metal-label {
+                width: 70%;
+            }
+        }
+
+        .metal-label_count {
+            display: flex;
+            justify-content: space-between;
+            width: 45%;
 
-                input,
-                span {
+            .bp3-popover-wrapper {
+                width: 70%;
+
+                input {
                     width: 100%;
                     margin: 0;
                 }
             }
+        }
+    }
+
+    .common-matal_3{
+        .metal-label_count {
+            display: flex;
+            justify-content: space-between;
+            width: 45%;
 
-            &>input:not([type="checkbox"]) {
+            .bp3-popover-wrapper {
                 width: 70%;
-            }
-        }
 
-        .bp3-popover-wrapper {
-            line-height: 20px;
+                input {
+                    margin: 0;
+                }
+            }
         }
     }
 }