diff --git a/package.json b/package.json index 8c15b1762..32c6f5a14 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,8 @@ }, "dependencies": { "@blueprintjs/core": "^3.23.1", + "@types/react-virtualized-auto-sizer": "^1.0.0", + "@types/react-window": "^1.8.1", "detect-browser": "^4.8.0", "dxf-parser": "^1.0.0-alpha.1", "golden-layout": "^1.5.9", @@ -88,6 +90,8 @@ "react-color": "^2.18.0", "react-dom": "^16.12.0", "react-rnd2": "^1.0.1", + "react-virtualized-auto-sizer": "^1.0.2", + "react-window": "^1.8.5", "stats.js": "^0.17.0", "three": "^0.113.2", "xaop": "^1.3.3" diff --git a/src/Add-on/LookOverBoardInfos/LookOverBoardInfosTool.ts b/src/Add-on/LookOverBoardInfos/LookOverBoardInfosTool.ts index 2a4e3824b..c8f601e0a 100644 --- a/src/Add-on/LookOverBoardInfos/LookOverBoardInfosTool.ts +++ b/src/Add-on/LookOverBoardInfos/LookOverBoardInfosTool.ts @@ -107,9 +107,8 @@ class LookOverBoardInfosTool if (b.LayerNails.length > 0) for (let objId of b.LayerNails) { - let nail = objId.Object as CylinderHole; - if (!nail.IsErase) - addDrillToMap("层板钉", nail); + if (!objId?.IsErase) + addDrillToMap("层板钉", objId.Object as CylinderHole); } //分析五金 diff --git a/src/UI/Components/Board/BoardInfosList.tsx b/src/UI/Components/Board/BoardInfosList.tsx index f94deed8b..c5a7e2c05 100644 --- a/src/UI/Components/Board/BoardInfosList.tsx +++ b/src/UI/Components/Board/BoardInfosList.tsx @@ -1,25 +1,29 @@ import React = require("react"); -import { HTMLSelect, Icon, Alert, Tag } from "@blueprintjs/core"; +import { Alert, HTMLSelect, Icon, Tag } from "@blueprintjs/core"; +import { observable } from "mobx"; import { observer } from "mobx-react"; +import { end } from "xaop"; import { EBoardKeyList } from "../../../Common/BoardKeyList"; import { CheckObjectType } from "../../../Common/CheckoutVaildValue"; import { safeEval } from "../../../Common/eval"; import { FixedNotZero } from "../../../Common/Utils"; import { Board } from "../../../DatabaseServices/Entity/Board"; -import { LinesType, IBaseOption } from "../../Store/BoardInterface"; -import { ToasterInput } from "../Toaster"; -import { observable } from "mobx"; -import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord"; import { ObjectId } from "../../../DatabaseServices/ObjectId"; +import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord"; +import { IBaseOption, LinesType } from "../../Store/BoardInterface"; +import { ToasterInput } from "../Toaster"; +import { ListItemSelectEventEmitter } from "./LookOverBoardInfos"; export interface IBoardInfoListProps { + className: string; index: number; br: Board; UpdateSeletctedBr: Function; ModifyDataRecord: Function; - isSelected: boolean; processGroupData: Map; + style: React.CSSProperties; + isSelect: boolean; } export interface IBoardInfoOptions extends IBaseOption { @@ -45,27 +49,43 @@ interface ITagData index: number; pg: ProcessingGroupRecord; } + /** * 批量查看板件属性 列表 - * @export - * @class BoardInfoList */ @observer export class BoardInfoList extends React.Component { - trRef; @observable private tags: Set = new Set(); private showAlert = observable.box(false); private removepg: ProcessingGroupRecord[] = []; + trRef: HTMLDivElement; + @observable isSelected: boolean = false; + private removeFuncs: Function[] = []; constructor(props) { super(props); this.InitState(this.props.br); } - UNSAFE_componentWillReceiveProps(nextProps) + componentDidMount() { - this.InitState(nextProps.br); + this.isSelected = this.props.isSelect; + this.ToggleBgColor(); + this.removeFuncs.push( + end(ListItemSelectEventEmitter, ListItemSelectEventEmitter.SingerSelectItemEvent, (msg: boolean) => this.isSelected = false) + ); + } + componentWillUnmount() + { + for (let f of this.removeFuncs) + f(); + this.removeFuncs.length = 0; + } + UNSAFE_componentWillReceiveProps(nextProps: IBoardInfoListProps) + { + if (nextProps.br) + this.InitState(nextProps.br); } UNSAFE_componentWillMount() { @@ -94,12 +114,13 @@ export class BoardInfoList extends React.Component { const { index, UpdateSeletctedBr } = this.props; - this.ToggleBgColor(); UpdateSeletctedBr(index, findSameTypeBrDataKey); + this.isSelected = !this.isSelected; }; - private ToggleBgColor = () => + ToggleBgColor = () => { - this.trRef.style.background === "rgb(206, 217, 224)" ? this.trRef.style.background = "#fff" : this.trRef.style.background = "#CED9E0"; + if (this.trRef) + this.trRef.style.background = this.isSelected ? "#CED9E0" : "#fff"; }; private updateTags = () => { @@ -132,10 +153,16 @@ export class BoardInfoList extends React.Component this.trRef = el} style={{ background: `${isSelected ? "#CED9E0" : "#fff"}` }} > - +
this.trRef = el} + style={{ + ...this.props.style, width: "fit-content", background: `${this.isSelected ? "#CED9E0" : "#fff"}` + }} > +
{index + 1}
+
{ this.HandleOnClick(EBoardKeyList.RoomName); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.RoomName, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.CabinetName); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.CabinetName, e.target.value); }} /> - - +
+
{ this.HandleOnClick("brName"); }} onBlur={(e) => { ModifyDataRecord(index, br, "brName", e.target.value); }} /> - - - +
+
{ this.HandleOnClick(EBoardKeyList.Height); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Height, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.Width); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Width, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.Thick); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Thick, e.target.value); }} /> - - - +
+
{ this.ToggleBgColor(); }} + onClick={() => this.ToggleBgColor()} onChange={e => { this.setState({ [EBoardKeyList.Lines]: safeEval(e.target.value) }); @@ -232,8 +257,8 @@ export class BoardInfoList extends React.Component { this.HandleOnClick(EBoardKeyList.Lines); }} /> - - +
+
{ this.HandleOnClick(); }} @@ -274,17 +299,17 @@ export class BoardInfoList extends React.Component {/* todo添加加工组 */} - +
{ br.IsSpecialShape ? - +
{ this.HandleOnClick(EBoardKeyList.UpSealed); }} /> - +
: <> - +
{ this.HandleOnClick(EBoardKeyList.UpSealed); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.UpSealed, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.DownSealed); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.DownSealed, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.LeftSealed); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.LeftSealed, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.RightSealed); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.RightSealed, e.target.value); }} /> - +
} - +
{ this.HandleOnClick("boardName"); }} onBlur={(e) => { ModifyDataRecord(index, br, "boardName", e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.Mat); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Mat, e.target.value); }} /> - - +
+
{ this.HandleOnClick(EBoardKeyList.Color); }} onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Color, e.target.value); }} /> - - +
+
- - +
+
0 ? "tick" : "blank"} /> - - +
+
); } } diff --git a/src/UI/Components/Board/LookOverBoardInfos.tsx b/src/UI/Components/Board/LookOverBoardInfos.tsx index 1c7af3220..3b0da59c3 100644 --- a/src/UI/Components/Board/LookOverBoardInfos.tsx +++ b/src/UI/Components/Board/LookOverBoardInfos.tsx @@ -1,36 +1,38 @@ import React = require("react"); -import { Button, Card, Classes, Icon, InputGroup, Intent, Divider, IconName } from "@blueprintjs/core"; +import { Button, Card, Classes, Divider, IconName, InputGroup, Intent } from "@blueprintjs/core"; import { observable } from "mobx"; import { observer } from "mobx-react"; +import AutoSizer from 'react-virtualized-auto-sizer'; +import { VariableSizeList as List } from 'react-window'; import { begin, end } from "xaop"; +import { DrillingReactor } from "../../../Add-on/DrawDrilling/DrillingReactor"; +import { DrillTypeCount, lookOverBoardInfosTool } from "../../../Add-on/LookOverBoardInfos/LookOverBoardInfosTool"; import { app } from "../../../ApplicationServices/Application"; +import { arrayRemove } from "../../../Common/ArrayExt"; import { EBoardKeyList } from "../../../Common/BoardKeyList"; import { CheckObjectType, CheckoutValid } from "../../../Common/CheckoutVaildValue"; import { safeEval } from "../../../Common/eval"; import { FileSystem } from "../../../Common/FileSystem"; import { KeyBoard } from "../../../Common/KeyEnum"; import { FixedNotZero } from "../../../Common/Utils"; +import { CylinderHole } from "../../../DatabaseServices/3DSolid/CylinderHole"; +import { CommandHistoryRecord } from "../../../DatabaseServices/CommandHistoryRecord"; +import { CreateObjectData } from "../../../DatabaseServices/CreateObjectData"; import { Board } from "../../../DatabaseServices/Entity/Board"; import { FileServer } from "../../../DatabaseServices/FileServer"; +import { ObjectId } from "../../../DatabaseServices/ObjectId"; +import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord"; import { SelectSetBase } from "../../../Editor/SelectBase"; import { equaln } from "../../../Geometry/GeUtils"; +import { IMetalsType } from "../../../Production/Product"; import { EFindType } from "../../Store/BoardFindInterface"; -import { ComposingType, FaceDirection, LinesType } from "../../Store/BoardInterface"; +import { LinesType } from "../../Store/BoardInterface"; +import { ModalFooter, ModalHeader } from "../Modal/ModalContainer"; import { ModalState } from "../Modal/ModalsManage"; import { AppToaster } from "../Toaster"; -import { BoardInfoList, IBoardInfoOptions } from "./BoardInfosList"; -import { DrillingReactor } from "../../../Add-on/DrawDrilling/DrillingReactor"; -import { CommandHistoryRecord } from "../../../DatabaseServices/CommandHistoryRecord"; -import { CreateObjectData } from "../../../DatabaseServices/CreateObjectData"; -import { CylinderHole } from "../../../DatabaseServices/3DSolid/CylinderHole"; -import { DrillTypeCount, lookOverBoardInfosTool } from "../../../Add-on/LookOverBoardInfos/LookOverBoardInfosTool"; -import { ModalHeader, ModalFooter } from "../Modal/ModalContainer"; -import { IMetalsType } from "../../../Production/Product"; import { HardwareCompositeEntity } from './../../../DatabaseServices/Hardware/HardwareCompositeEntity'; import { HardwareTopline } from './../../../DatabaseServices/Hardware/HardwareTopline'; -import { arrayRemove } from "../../../Common/ArrayExt"; -import { ObjectId } from "../../../DatabaseServices/ObjectId"; -import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord"; +import { BoardInfoList, IBoardInfoOptions } from "./BoardInfosList"; interface BoradDataInArray { @@ -46,10 +48,26 @@ interface LookOverBoardInfosModalProps { boardList: (Board | IMetalsType)[]; } +interface SortBtnData +{ + text: string; + icon: IconName; +} + +//列表选中时发出的事件 +class ListItemSelectEvent +{ + //选中单个列表事件,事件发出后,其他的item取消选中 + SingerSelectItemEvent() + { + + } +} + +export const ListItemSelectEventEmitter = new ListItemSelectEvent; + /** - * 批量查看板件属性 对话框 - * @export - * @class LookOverBoardInfosModal + * 批量查看板件属性 对话框 (bbs) */ @observer export class LookOverBoardInfosModal extends React.Component @@ -70,14 +88,18 @@ export class LookOverBoardInfosModal extends React.Component = new Map(); //列表中被选中的板件 - @observable selectedBrOnList: Board[] = []; + selectedBrOnList: Board[] = []; //查看同类板件的依据(如宽高、房间名等) @observable findSameTypeBrDataKey: string; //是否多选/单选 @observable isCtrlDown: boolean = false; - titleData = ["房名", "柜名", " 板件名", " 高", " 宽", " 厚", " 纹路", " 加工", "上封边", "下封边", "左封边", "右封边", " 板材名", "材料", "颜色", "异形", "造型"]; processGroupMap: Map = new Map();//板件加工组 按名分类 便于区分 - + //可排序标题按钮的数据 + @observable sortBtnData: SortBtnData[] = [ //tips:注意空格 + { text: " 高", icon: "blank" }, + { text: " 宽", icon: "blank" }, + { text: " 厚", icon: "blank" }, + ]; UNSAFE_componentWillMount() { this.UpdateDrillCount(); @@ -127,10 +149,18 @@ export class LookOverBoardInfosModal extends React.Component a.Index - b.Index); } } + InitWidth = () => + { + let modal = document.getElementById("modal"); + let modalc0 = modal.children[0] as HTMLElement; + modal.style.width = Math.min(1160, (window.innerWidth * 0.8)) + "px"; + modalc0.style.width = modal.style.width; + }; //注册事件 componentDidMount() { - let ed = app.Editor; + this.InitWidth(); + let selectCtrl = app.Editor.SelectCtrl; let dr = new DrillingReactor(); const UpdateByRedoUndo = (historyRec: CommandHistoryRecord) => @@ -190,10 +220,12 @@ export class LookOverBoardInfosModal extends React.Component + begin(app.Editor.ModalManage, app.Editor.ModalManage.onKeyUp, (e: KeyboardEvent) => { if (e.keyCode === KeyBoard.Control) this.isCtrlDown = false; + e.stopPropagation(); + return true; }), end(dr, dr.StartReactor, () => { @@ -287,7 +319,7 @@ export class LookOverBoardInfosModal extends React.Component @@ -365,14 +397,17 @@ export class LookOverBoardInfosModal extends React.Component { let br = this.dataList.realBr[index]; - if (this.selectedBrOnList.includes(br)) - this.selectedBrOnList = this.selectedBrOnList.filter((b) => b !== br); - else + if (this.isCtrlDown) { - if (this.isCtrlDown)//true多选 false单选 - this.selectedBrOnList.push(br); + if (this.selectedBrOnList.includes(br)) + this.selectedBrOnList = this.selectedBrOnList.filter((b) => b !== br); else - this.selectedBrOnList = [br]; + this.selectedBrOnList.push(br); + } + else + { + ListItemSelectEventEmitter.SingerSelectItemEvent(); + this.selectedBrOnList = [br]; } this.CheckOutChosenBr(); @@ -575,9 +610,19 @@ export class LookOverBoardInfosModal extends React.Component + handleOrder = (btnText: string) => { - switch (type) + let d: SortBtnData; + let asc: boolean = false; + for (let data of this.sortBtnData) + { + if (data.text === btnText) + { + asc = data.icon === "symbol-triangle-up"; + d = data; + } + } + switch (btnText) { case " 高": this.UpdateDisplayData(this.searchRes.realBr.sort((a, b) => { return asc ? a.Height - b.Height : b.Height - a.Height; })); @@ -588,13 +633,20 @@ export class LookOverBoardInfosModal extends React.Component { return asc ? a.Thickness - b.Thickness : b.Thickness - a.Thickness; })); break; + default: + break; } + //改变图标 + if (d.icon === "blank") + d.icon = "symbol-triangle-up"; + else + d.icon = d.icon === "symbol-triangle-up" ? "symbol-triangle-down" : "symbol-triangle-up"; }; //------------------------------对话框功能相关 结束------------------------------// render() { - const keyword = [" 高", " 宽", " 厚"];//tips:注意空格 + const listItemHeight = 23; return ( <>
{ this.OnOk(ModalState.Cancel); }} /> -
+
{/* 列表 */} - {/* 列表标题 */} -
- - - {this.titleData.map((data) => - { - return (); - })} - -
+ + { + ({ height, width }) => ( + <> +
{ + let a = document.getElementsByClassName("bbs-list")[0].scrollLeft; + let b = document.getElementsByClassName("bbs-list-tr title")[0] as HTMLDivElement; + b.style.left = (-a) + "px"; + }} + > + + + { + ({ height, width }) => ( + listItemHeight} + > + { + ({ index, style }) => ( + + ) + } + + ) + } + +
+ + {/* 配件信息 */} + { - keyword.includes(data) ? - - : - <>{data} - } -
-
- - - { - this.searchRes.dataBr.map((br, index) => - { - return ( - - ); - }) - } - -
- {/* 配件信息 */} - - +
+ {/* 配件信息 */} + + +
+ } + + ) + } +
@@ -701,22 +769,40 @@ export class LookOverBoardInfosModal extends React.Component +class TitleBanner extends React.Component<{ sortBtnData: SortBtnData[], style: any, handleOrder: Function; }, {}> { - @observable icon: IconName = "blank"; - handleClick = () => + static titleData = ["序号", "房名", "柜名", " 板件名", " 高", " 宽", " 厚", " 纹路", " 加工", "上封边", "下封边", "左封边", "右封边", " 板材名", "材料", "颜色", "异形", "造型"]; + render() { - if (this.icon === "blank") - this.icon = "symbol-triangle-up"; - else - this.icon = this.icon === "symbol-triangle-up" ? "symbol-triangle-down" : "symbol-triangle-up"; - this.props.func(this.props.text, this.icon === "symbol-triangle-up"); - }; + return ( +
+ { + TitleBanner.titleData.map((data) => +
+ { + this.props.sortBtnData.findIndex((d) => d.text === data) === -1 ? + <>{data} + : + d.text === data)]} + func={this.props.handleOrder} + /> + } +
+ )} +
+ ); + } +} + +class TitleSortButton extends React.Component<{ sortBtnData: SortBtnData, func: Function; }, {}> +{ render() { return ( -