From 50a7fe47cf6f7003075cf5ce8db3dc3840937ec4 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, 6 Mar 2023 03:52:42 +0000 Subject: [PATCH] =?UTF-8?q?!2116=20=E6=96=B0=E5=A2=9E:=E5=8F=B3=E4=BE=A7?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=9D=90=E8=B4=A8=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/UI/Components/Common/Datalist.tsx | 152 +++---- src/UI/Components/MaterialExplorer.less | 144 +++++++ src/UI/Components/MaterialExplorer.tsx | 12 +- .../Components/RightPanel/TemplateParam.less | 24 -- .../Components/SourceManage/CommonPanel.tsx | 191 +++++++-- .../SourceManage/DirTreeComponent.tsx | 72 ++-- .../Components/SourceManage/MaterialList.tsx | 17 +- src/UI/Components/SourceManage/Pagination.tsx | 19 +- .../Components/SourceManage/RightMaterial.tsx | 8 +- .../SourceManage/RightMaterialPanel.tsx | 396 ------------------ .../SourceManage/RightMyMaterialPanel.less | 96 ----- src/UI/Css/dataList.less | 30 +- 12 files changed, 467 insertions(+), 694 deletions(-) create mode 100644 src/UI/Components/MaterialExplorer.less delete mode 100644 src/UI/Components/SourceManage/RightMaterialPanel.tsx delete mode 100644 src/UI/Components/SourceManage/RightMyMaterialPanel.less diff --git a/src/UI/Components/Common/Datalist.tsx b/src/UI/Components/Common/Datalist.tsx index c4fdec464..0d0c3f3b6 100644 --- a/src/UI/Components/Common/Datalist.tsx +++ b/src/UI/Components/Common/Datalist.tsx @@ -10,6 +10,7 @@ import { AnyObject } from '../../Store/BoardInterface'; import { ScaleImages } from '../Template/ScaleImages'; import { RenderBackGroundImg } from '../ToolBar/ResourceLibrary/Resource_ResourceList'; + export interface IDataListProps { dataList: any[]; @@ -20,6 +21,7 @@ export interface IDataListProps renderOtherElement?: (data) => JSX.Element; selectData: Set; showInfos: boolean; + isSmaller?: boolean; dbclickImg?: (data: AnyObject) => void; dragStart?: (data: AnyObject) => void; preview?: boolean; @@ -44,13 +46,14 @@ export class DataList extends React.Component { activeId: "", style: {}, hintClassName: "", - canDrag: true + canDrag: true, + isSmaller: false, }; private currentData: any; renderBigData = () => { return ( - <> + ); }; renderSmall = () => @@ -162,61 +165,79 @@ export class DataList extends React.Component { return ( <> { - this.props.dataList.map(data => - { - return ( -
  • this.handleMouseDown(e, data)} - onMouseUp={(e) => this.handleMouseUp(e, data)} - > -
    - { - this.props.isSvg ? - <> - - - -
    {data.name}
    - - : - <> -
    - -
    -
    {data.name}
    - - } -
    -
    - {data.update_date ?? data.create_date} -
    -
    - { - getFileSize(parseFloat(data.size)) - } -
    -
    - { - this.props.renderButtons && this.props.renderButtons(data) - } -
    -
    • - ); - }) + this.props.dataList.length > 0 && !this.props.isSmaller && +
    +
    名称
    +
    修改日期
    +
    大小
    +
    操作
    +
    } +
      + { + this.props.dataList.map(data => + { + return ( +
    • this.handleMouseDown(e, data)} + onMouseUp={(e) => this.handleMouseUp(e, data)} + > +
      this.handleDragStart(data)} + draggable="true" + style={{ padding: "5px 0", height: 50, display: "grid", gridTemplateColumns: "50px 1fr" }} + > + { + this.props.isSvg ? + <> + + + +
      {data.name}
      + + : + <> +
      + +
      +
      {data.name}
      + + } +
      + {!this.props.isSmaller && + <> +
      + {data.update_date ?? data.create_date} +
      +
      + { + getFileSize(parseFloat(data.size)) + } +
      +
      + { + this.props.renderButtons && this.props.renderButtons(data) + } +
      + } +
      • + ); + }) + } +
    ); }; @@ -229,22 +250,7 @@ export class DataList extends React.Component { style={this.props.style ?? {}} onMouseDown={(e) => this.handleMouseDown(e, {})} > - { - this.props.showInfos && this.props.dataList.length > 0 && -
    -
    名称
    -
    修改日期
    -
    大小
    -
    操作
    -
    - } -
      - { - this.props.showInfos ? this.renderSmall() : this.renderBigData() - } -
    + {this.props.showInfos ? this.renderSmall() : this.renderBigData()} ); } diff --git a/src/UI/Components/MaterialExplorer.less b/src/UI/Components/MaterialExplorer.less new file mode 100644 index 000000000..98927b2da --- /dev/null +++ b/src/UI/Components/MaterialExplorer.less @@ -0,0 +1,144 @@ +.material-explorer { + height: 100%; + display: flex; + flex-direction: column; + + .material-config { + height: 20px; + display: flex; + justify-content: flex-end; + } + + .right-material-param { + padding-bottom: 5px; + flex-grow: 1; + flex-basis: 200px; + overflow: hidden; + + .material-param { + margin-bottom: 3px; + } + + .setsplit(); + + .my-material-param { + margin-top: 2px; + display: flex; + flex-direction: column; + + .material-search { + height: 34px; + + input { + width: 99%; + } + } + + .material-params { + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; + border: 1px solid #ccc; + + .img-tree { + height: 40%; + width: 100%; + padding: 0; + overflow: auto; + + .bp3-tree { + height: 100%; + padding-bottom: 10px; + box-shadow: none; + + &>ul { + max-height: 95%; + overflow: auto; + } + + .bp3-tree-node-content-1 { + padding-left: 10px; + } + } + } + + .material-datalist { + width: 100%; + height: 60%; + overflow: visible; + position: relative; + display: flex; + flex-direction: column; + + &> :nth-child(1) { + flex: 1; + } + + .mat-list:first-child { + padding-bottom: 10px; + + li { + cursor: pointer; + } + + .look-mat { + user-select: none; + } + + &>li { + text-align: center; + + .hint:hover::before { + content: none; + } + + &>.bp3-control { + left: 10px; + top: 10; + } + + &>p { + margin-bottom: 0; + width: 100%; + } + } + } + + .bp3-dialog-container { + position: fixed; + left: 0; + top: 0; + z-index: 30; + + .bp3-dialog { + width: unset; + margin: 0; + padding: 0; + } + } + } + } + } + } +} + +//split组件样式 +.setsplit { + .gutter { + background-color: #999; + background-repeat: no-repeat; + background-position: 10%; + } + + .gutter.gutter-vertical { + cursor: row-resize; + padding: auto; + border-radius: 20px; + } + + .split { + width: 100%; + height: 100%; + } +} diff --git a/src/UI/Components/MaterialExplorer.tsx b/src/UI/Components/MaterialExplorer.tsx index df1bc06a0..70ac4c4ec 100644 --- a/src/UI/Components/MaterialExplorer.tsx +++ b/src/UI/Components/MaterialExplorer.tsx @@ -23,6 +23,7 @@ import { userConfigStore } from '../Store/UserConfigStore'; import { ApplyGoodInfo } from "./ApplyGoodInfo"; import { Asset } from './Asset'; import { BoardModalType } from "./Board/BoardModalType"; +import './MaterialExplorer.less'; import { RightMaterial } from './SourceManage/RightMaterial'; const rootStyle: React.CSSProperties = { @@ -38,6 +39,7 @@ const rootStyle: React.CSSProperties = { height: "100%", paddingLeft: "10px", + border: "1px solid #ccc", }; /** @@ -180,8 +182,8 @@ export class MaterialExplorer extends React.Component<{ materialTable: MaterialT render() { return ( - <> -
    +
    +
    -
    +
    -
    { e.preventDefault(); @@ -263,7 +265,7 @@ export class MaterialExplorer extends React.Component<{ materialTable: MaterialT
    - +
    ); } handleCreateMaterial = () => diff --git a/src/UI/Components/RightPanel/TemplateParam.less b/src/UI/Components/RightPanel/TemplateParam.less index d6072b6a8..d20e099ef 100644 --- a/src/UI/Components/RightPanel/TemplateParam.less +++ b/src/UI/Components/RightPanel/TemplateParam.less @@ -155,27 +155,3 @@ } } } - -#MaterialParam { - height : 96%; - width : 100%; - position: relative; - - .gutter { - background-color : #999; - background-repeat : no-repeat; - background-position: 10%; - } - - .gutter.gutter-vertical { - cursor : row-resize; - padding : auto; - border-radius: 20px; - margin-top : 4px; - } - - .split { - width : 100%; - height: 100%; - } -} diff --git a/src/UI/Components/SourceManage/CommonPanel.tsx b/src/UI/Components/SourceManage/CommonPanel.tsx index 1c4a54d0a..8f6059ac3 100644 --- a/src/UI/Components/SourceManage/CommonPanel.tsx +++ b/src/UI/Components/SourceManage/CommonPanel.tsx @@ -3,6 +3,7 @@ import hotkeys from 'hotkeys-js-ext'; import { action, observable, toJS } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { end } from 'xaop'; import { ITempTagProps } from '../../../Add-on/Template/TemplateTagCommand'; import { app } from '../../../ApplicationServices/Application'; import { arrayLast } from '../../../Common/ArrayExt'; @@ -79,12 +80,13 @@ export interface ICommonPanelState } export interface ICommonPanelProps { + isRightMaterialPanel?: boolean; defaultDirId: string; //根目录ID - renderNav?: () => JSX.Element; //渲染导航栏 - renderMenuItems?: () => JSX.Element; //渲染右键菜单项 canDelete?: boolean; //是否可以删除数据 deleteUrl: string; //删除后端URL getUrl: string; //获取数据URL + renderNav?: () => JSX.Element; //渲染导航栏 + renderMenuItems?: () => JSX.Element; //渲染右键菜单项 clickTree?: () => void; delete?: (data) => void; canOrder?: boolean; //可以排序 @@ -130,11 +132,11 @@ export class CommonPanel extends React.Component = new Map(); private ColResizeEl = React.createRef(); + private selectContainer = React.createRef(); private startHandleDir = observable.box(false); //开始操作目录,重命名or新建 private timeId = null; //搜索时的定时器 private dataList = observable([]); private _dragId = ""; - private selectContainer: HTMLElement; private selectTool: SelectDataTool; private idKey: string; private copyIds = new Set(); @@ -160,6 +162,7 @@ export class CommonPanel extends React.Component void; constructor(props) @@ -224,47 +227,74 @@ export class CommonPanel extends React.Component { options.bubbles = true; el.dispatchEvent(new MouseEvent("mousedown", options)); }; - this.selectTool = new SelectDataTool(this.selectContainer); - this.selectTool.SelectCallBack = (els: HTMLElement[]) => + if (this.props.isRightMaterialPanel) { - if (!els) //组件已经被卸载了 - return; + //如果有通知修改,那么我们刷新这个 + this._Events.push(end(CommonPanelEventBus.GetInstance(), CommonPanelEventBus.GetInstance().UpdateEvent, (url: string, isdelete?: boolean) => + { + if (url === this.props.getUrl) + { + if (isdelete) + { + Object.assign(this.currentDir, { id: this.props.defaultDirId, path: "", pathNum: [] }); + CommonPanel.CurrentDirCache.delete(this.props.defaultDirId); + } + this.loadingData(); + } + })); + } + else + { + this.selectTool = new SelectDataTool(this.selectContainer.current); + this.selectTool.SelectCallBack = (els: HTMLElement[]) => + { + if (!els) //组件已经被卸载了 + return; - if (!this.IsCtrlDown) - this.selectIds.clear(); - let ids = els.map(el => el.getAttribute('data-id')); - this.setState({ isSelectAll: false }); + if (!this.IsCtrlDown) + this.selectIds.clear(); + let ids = els.map(el => el.getAttribute('data-id')); + this.setState({ isSelectAll: false }); - for (let id of ids) - this.selectIds.add(id); + for (let id of ids) + this.selectIds.add(id); - this.setState({ isSelectAll: this.dataList.length > 0 && this.selectIds.size === this.dataList.length }); + this.setState({ isSelectAll: this.dataList.length > 0 && this.selectIds.size === this.dataList.length }); - }; + }; - if (this.selectContainer && this.props.copyUrl) - { - document.addEventListener('keydown', this.handleKeydown); + if (this.selectContainer.current && this.props.copyUrl) + { + document.addEventListener('keydown', this.handleKeydown); + } } - this.loadingData(); } componentWillUnmount() { window.removeEventListener('resize', this.GetScreenSize, false); + this.touchEventEditor.Destory(); - this.selectTool.Destory(); + if (this.props.isRightMaterialPanel) + { + this._Events.forEach(f => f()); + this._Events.length = 0; + } + else + { + this.selectTool.Destory(); + } this.LoadingDataPromise = null; localStorage.setItem("showInfos_" + this.props.defaultDirId, this.showInfos ? "1" : "0"); - if (this.selectContainer && this.props.copyUrl) + if (this.selectContainer.current && this.props.copyUrl) { document.removeEventListener('keydown', this.handleKeydown); } @@ -554,7 +584,7 @@ export class CommonPanel extends React.Component this.selectContainer = el} + ref={this.selectContainer} style={this.props.maxDirLength === 0 ? { width: "100%" } : {}} > { @@ -589,22 +619,58 @@ export class CommonPanel extends React.Component ); }; - render() + private renderRightMaterialPanel = (() => { return ( - <> - - { - this.searchedDirs.length = 0; - this.defaultDirName = ""; - }} - > - {this.isSmallScreen ? this.readerNavbarMin() : this.renderNavbar()} - - {!this.isSmallScreen && this.renderDirTree()} - {this.renderDataList()} +
    +
    + { e.stopPropagation(); }} + onChange={(e) => this.handleSearch(e)} + /> +
    +
    + +
    + { + React.Children.map(this.props.children, child => + child && React.cloneElement(child as React.DetailedReactHTMLElement, + { + dataList: this.dataList, + currentDir: this.currentDir, + getData: this.handleGetData, + select: this.handleSelectData, + selectIds: this.selectIds, + showInfos: this.showInfos, + }) + ) + } + { + this.pageData.count > this.pageData.pageCount && + + }
    +
    +
    +
    + ); + } + ); + render() + { + return ( + this.props.isRightMaterialPanel ? + this.renderRightMaterialPanel() + : + <> + + { + this.searchedDirs.length = 0; + this.defaultDirName = ""; + }} + > + {this.isSmallScreen ? this.readerNavbarMin() : this.renderNavbar()} + + {!this.isSmallScreen && this.renderDirTree()} + {this.renderDataList()} +
    +
    +     -     - {!(this.isSmallScreen && this.ColResizeEl.current) && this.renderHandleDirComponent()} - + {!(this.isSmallScreen && this.ColResizeEl.current) && this.renderHandleDirComponent()} + ); } @@ -855,7 +958,7 @@ export class CommonPanel extends React.Component, + ...this.GetSecondaryLabel() }); return true; } @@ -1076,6 +1179,10 @@ export class CommonPanel extends React.Component + { + return { secondaryLabel: this.props.isRightMaterialPanel ? "" : }; + }; //分析目录转换为ui节点数 private parseNodes = (dirs: any) => @@ -1090,7 +1197,7 @@ export class CommonPanel extends React.Component 0, className: dir.dir_id, //为了识别这个元素的目录id childNodes: this.parseNodes(dir.childs), - secondaryLabel: + ...this.GetSecondaryLabel() }; newNodes.push(node); } diff --git a/src/UI/Components/SourceManage/DirTreeComponent.tsx b/src/UI/Components/SourceManage/DirTreeComponent.tsx index 0eed31150..239d30c59 100644 --- a/src/UI/Components/SourceManage/DirTreeComponent.tsx +++ b/src/UI/Components/SourceManage/DirTreeComponent.tsx @@ -15,14 +15,14 @@ const PUSHDOWN = "push-down"; export interface DirIds { - dir_id: string, - pre_dir_id: string, - next_dir_id: string, - parent_dir_id: string, + dir_id: string; + pre_dir_id: string; + next_dir_id: string; + parent_dir_id: string; } interface DirTreeEvent { - onClickTree?: () => void, + onClickTree?: () => void; onNodeClick?: (isReLoad?: boolean, isSecondaryLabel?: boolean) => void; //点击目录节点事件 onNodeContainerClick?: () => void; //点击空白容器事件 onMoveToDir?: (targetId: string) => void; //移动其他元素到目录事件 @@ -37,8 +37,8 @@ interface DirTreeCall interface DirTreeState { - currentDir: IDirectoryProps, - prevCurrentDirId: string, + currentDir: IDirectoryProps; + prevCurrentDirId: string; isContextMenuOpen: boolean; //是否打开右键菜单 nodes: TreeNodeInfo[]; //目录节点 defaultDirName: string; //新目录名字 @@ -47,14 +47,13 @@ interface DirTreeState interface DirTreeProps extends DirTreeEvent, DirTreeCall { - renderMenuItems?: () => JSX.Element, //渲染右键菜单项 - currentDirProps?: IDirectoryProps, - defaultDirId?: string, - nodes: TreeNodeInfo[], - maxDirLength?: number, - isPreventDrag?: boolean, - currentDir?: IDirectoryProps, - curNodeData?: TreeNodeInfo; + renderMenuItems?: () => JSX.Element; //渲染右键菜单项 + defaultDirId?: string; + nodes: TreeNodeInfo[]; + maxDirLength?: number; + isPreventDrag?: boolean; + currentDir?: IDirectoryProps; + canDrag?: boolean; } @observer export class DirTreeComponent extends React.Component @@ -62,6 +61,7 @@ export class DirTreeComponent extends React.Component = { maxDirLength: 1, defaultDirId: "", + canDrag: true, }; private _moveDirId = ""; private _moveElement: HTMLElement; @@ -220,7 +220,6 @@ export class DirTreeComponent extends React.Component (n.isSelected = false)); curNodeData.isSelected = true; - // this.setState(this.state); }; //展开折叠目录 @@ -240,8 +239,11 @@ export class DirTreeComponent extends React.Component { let isSuccess = this.props.handleRenameDir && (await this.props.handleRenameDir(curNodeData, false)); @@ -715,6 +718,7 @@ export class DirTreeComponent extends React.Component { @@ -772,22 +781,23 @@ export class DirTreeComponent extends React.Component, prevState: Readonly, snapshot?: any): void diff --git a/src/UI/Components/SourceManage/MaterialList.tsx b/src/UI/Components/SourceManage/MaterialList.tsx index e629415e0..fd4f90357 100644 --- a/src/UI/Components/SourceManage/MaterialList.tsx +++ b/src/UI/Components/SourceManage/MaterialList.tsx @@ -174,23 +174,27 @@ export class MaterialList extends React.Component { this.readyMtl = null; } else - for (let i = 0; i < 5; i++) + { + while (true) { - if (el === document.getElementById("RightMaterialParam")) + if (el.id === "RightMaterialParam") { await this.applyMtl(this.readyMtl); break; } else el = el.parentElement; + if (el === null || el.classList.contains("material-explorer")) + break; } + } }; private applyMtl = async (data: { material_id: string; name: string; }) => { this.readyMtl = data; let mtl = app.Database.MaterialTable.GetAt(data.name); if (!mtl) - this.coverMtl(); + this.coverMtl(false); else this.handleOpen(); }; @@ -209,7 +213,7 @@ export class MaterialList extends React.Component { } this.handleClose(); }; - private coverMtl = async () => + private coverMtl = async (isCover: boolean = true) => { CommandWrap(async () => { @@ -226,12 +230,12 @@ export class MaterialList extends React.Component { this.readyMtl = null; AppToaster.show({ intent: Intent.SUCCESS, - message: "图纸覆盖成功", + message: `图纸${isCover ? "覆盖" : "应用"}成功`, timeout: 1000 }); } this.handleClose(); - }, "材质覆盖"); + }, `材质${isCover ? "覆盖" : "应用"}`); }; private applyEntity = (data: { material_id: string; name: string; }) => { @@ -314,6 +318,7 @@ export class MaterialList extends React.Component { dragStart={this.handleDragStart} selectData={this.props.selectIds} hintClassName="hint editor-lint" + isSmaller={this.props.isRightToolbar} canDrag renderButtons={(data) => <> { diff --git a/src/UI/Components/SourceManage/Pagination.tsx b/src/UI/Components/SourceManage/Pagination.tsx index a2441d2eb..cf6ca5902 100644 --- a/src/UI/Components/SourceManage/Pagination.tsx +++ b/src/UI/Components/SourceManage/Pagination.tsx @@ -19,6 +19,7 @@ export class Pagination extends React.Component pages) break; @@ -41,15 +43,17 @@ export class Pagination extends React.Component - { - getImgListFun({ curr_page: i }); - } - } + onClick={() => + { + this.isReset = false; + let n = Math.ceil(pageData.currentPage / this.maxCount) - 1; + this.setState({ startPage: 1 + n * this.maxCount }); + getImgListFun({ curr_page: i }); + }} >{i} ); } + this.isReset = true; return lis; }; private handleChangePage = (isNext = true) => @@ -67,6 +71,7 @@ export class Pagination extends React.Component render() { return ( - isOpen={this.startCreateMat} /> } - + ); } } diff --git a/src/UI/Components/SourceManage/RightMaterialPanel.tsx b/src/UI/Components/SourceManage/RightMaterialPanel.tsx deleted file mode 100644 index 2f6aaa910..000000000 --- a/src/UI/Components/SourceManage/RightMaterialPanel.tsx +++ /dev/null @@ -1,396 +0,0 @@ -import { Classes, ITreeNode, Tree } from "@blueprintjs/core"; -import hotkeys from "hotkeys-js-ext"; -import { action, observable } from "mobx"; -import { observer } from "mobx-react"; -import React from "react"; -import { end } from "xaop"; -import { app } from "../../../ApplicationServices/Application"; -import { arrayLast } from "../../../Common/ArrayExt"; -import { DirUrl } from "../../../Common/HostUrl"; -import { MouseKey } from "../../../Common/KeyEnum"; -import { DirectoryId, PostJson, RequestStatus } from "../../../Common/Request"; -import { CommonPanelEventBus } from "./CommonPanel"; -import { Pagination } from "./Pagination"; -import './RightMyMaterialPanel.less'; -export interface IDirectoryProps -{ - id: DirectoryId | string; - path: string; - pathNum: number[]; -} -interface ICommonPanelState -{ - nodes: ITreeNode[]; //目录节点 - defaultDirName: string; //新目录名字 - updateNode: ITreeNode; //需要更新的目录节点 -} -interface ICommonPanelProps -{ - defaultDirId: string; //根目录ID - getUrl: string; //获取数据URL - dirNameFilter?: string[]; -} -@observer -export class RightMaterialPanel extends React.Component -{ - constructor(props) - { - super(props); - this.state = { - nodes: [], - defaultDirName: "", - updateNode: undefined, - }; - this._CurrentDir.id = DirectoryId.MaterialDir; - this._IdKey = "material_id"; - } - static CurrentDirCache: Map = new Map(); - @observable _DataList = []; - @observable _SelectIds = new Set(); - @observable _CurrentDir: IDirectoryProps = { - id: DirectoryId.None, - path: "", - pathNum: [] - }; - @observable _PageData = { //分页数据 - count: 0, - currentPage: 1, - pageCount: 15 - }; - @observable _SearchStr = "";//搜索材质名 - _IdKey: string; - _Events: Function[] = []; - _Tree: HTMLElement; //目录数元素 - _TimeId = null; //搜索时的定时器 - - get IsCtrlDown() - { - return app.Editor.ModalManage.IsCtrlDown || hotkeys.ctrl; - } - - componentDidMount() - { - //监听右键其他位置 - if (this._Tree) - { - this._Tree.addEventListener('mousedown', this._HandleTreeMouseDown); - } - this._LoadingData(); - - //如果有通知修改,那么我们刷新这个 - this._Events.push(end(CommonPanelEventBus.GetInstance(), CommonPanelEventBus.GetInstance().UpdateEvent, (url: string, isdelete?: boolean) => - { - if (url === this.props.getUrl) - { - if (isdelete) - { - Object.assign(this._CurrentDir, { id: this.props.defaultDirId, path: "", pathNum: [] }); - RightMaterialPanel.CurrentDirCache.delete(this.props.defaultDirId); - } - this._LoadingData(); - } - })); - } - - componentWillUnmount() - { - if (this._Tree) - { - this._Tree.removeEventListener('mousedown', this._HandleTreeMouseDown); - } - - this._Events.forEach(f => f()); - this._Events.length = 0; - } - render() - { - return ( -
    -
    - { e.stopPropagation(); }} - onChange={(e) => this._HandleSearch(e)} - /> -
    -
    -
    this._Tree = c} - > - this._HandleNodeCollapse(node, true)} - onNodeExpand={(node) => this._HandleNodeCollapse(node, false)} - className={Classes.ELEVATION_0} - /> -
    -
    - { - React.Children.map(this.props.children, child => - child && React.cloneElement(child as React.DetailedReactHTMLElement, - { - dataList: this._DataList, - currentDir: this._CurrentDir, - getData: this._HandleGetData, - select: this._HandleSelectData, - selectIds: this._SelectIds, - }) - ) - } - { - this._PageData.count > this._PageData.pageCount && - - } -
    -
    -
    - ); - } - - _HandleSelectData = (e: React.MouseEvent, data) => - { - const id = data[this._IdKey]; - const selectIds = this._SelectIds; - - if (e.button === MouseKey.Left) - { - if (!this.IsCtrlDown) - selectIds.clear(); - } - else - { - if (!this.IsCtrlDown && !selectIds.has(id)) - selectIds.clear(); - } - - if (this.IsCtrlDown) - { - if (selectIds.has(id)) - selectIds.delete(id); - else - selectIds.add(id); - } - else - selectIds.add(id); - }; - - //选中目录亮显 - _SelectNode = (nodeData: ITreeNode, isSelected?: boolean) => - { - this._ForEachNode(this.state.nodes, n => (n.isSelected = false)); - nodeData.isSelected = true; - this.setState(this.state); - }; - - //点击目录 - _HandleNodeClick = async (nodeData: ITreeNode, _nodePath: number[]) => - { - const isReLoad = nodeData.id !== this._CurrentDir.id; - this._GetCurrentDir(nodeData.id, _nodePath); - this._SelectIds.clear(); - if (isReLoad) - await this._HandleGetData(); - this._SelectNode(nodeData); - }; - - //去掉其他节点被选择状态 - _ForEachNode(nodes: ITreeNode[], callback: (node: ITreeNode) => void) - { - if (nodes == null) - { - return; - } - - for (const node of nodes) - { - callback(node); - this._ForEachNode(node.childNodes, callback); - } - } - - //获取当前目录路径 - _GetCurrentDir = (dirId: React.ReactText, nodePath: number[]) => - { - let path = ""; - let childNodes: ITreeNode[]; - for (let i of nodePath) - { - let node: ITreeNode; - if (!childNodes) - { - node = this.state.nodes[i]; - } - else - { - node = childNodes[i]; - } - path += node.label + "/"; - childNodes = node.childNodes; - } - Object.assign(this._CurrentDir, { id: dirId, path, pathNum: nodePath }); - RightMaterialPanel.CurrentDirCache.set(this.props.defaultDirId, { id: dirId as DirectoryId, path, pathNum: nodePath }); - }; - - //分析目录转换为ui节点数 - _ParseNodes = (dirs: any) => - { - let newNodes: ITreeNode[] = []; - for (let dir of dirs) - { - let node: ITreeNode = { - id: dir.dir_id, - label: dir.dir_name, - icon: "folder-close", - hasCaret: dir.childs.length > 0, - className: dir.dir_id, //为了识别这个元素的目录id - childNodes: this._ParseNodes(dir.childs), - }; - newNodes.push(node); - } - return newNodes; - }; - - //展开折叠目录 - _HandleNodeCollapse = (nodeData: ITreeNode, isCollapse: boolean) => - { - nodeData.isExpanded = !isCollapse; - this.setState(this.state); - }; - - /** - * 服务段获取数据 - * name-查询字符串,curr_page-当前页,dir_id:目录id - * desc 倒序 - */ - @action - _HandleGetData = async (queryData?: { dir_id?: string, name?: string, curr_page?: number; }) => - { - let query: any; - - query = { - dir_id: this._CurrentDir.id, - curr_page: 1, - page_count: this._PageData.pageCount, - name: this._SearchStr, - }; - - //若不传入数据,用默认查询数据. - if (queryData) - { - Object.assign(query, queryData); - } - - this._PageData.currentPage = query.curr_page; - if (query.name && query.dir_id === this.props.defaultDirId) - query.dir_id = DirectoryId.None; - let data = await PostJson(this.props.getUrl, query); - - if (data.err_code === RequestStatus.Ok && Number(data.count)) - { - let dataList: any[]; - dataList = data.images || data.materials || data.toplines || data.files || data.modules || []; - dataList.forEach(d => d.isChecked = false); - this._DataList = dataList; - } - else - this._DataList.length = 0; - - this._PageData.count = parseInt(data.count); - this._SelectIds.clear(); - }; - - //点击节点容器的动作 - _HandleTreeMouseDown = (e: MouseEvent) => - { - let el = e.target as HTMLElement; - if (e.button === MouseKey.Left) - { - if (el.classList.contains('bp3-tree')) - { - this._ForEachNode(this.state.nodes, n => (n.isSelected = false)); - if (this._CurrentDir.id !== this.props.defaultDirId) - { - Object.assign(this._CurrentDir, { id: this.props.defaultDirId, path: "", pathNum: [] }); - RightMaterialPanel.CurrentDirCache.set(this.props.defaultDirId, { id: this.props.defaultDirId as DirectoryId, path: "", pathNum: [] }); - this._HandleGetData(); - } - } - } - }; - - _LoadingData = async () => - { - let data = await PostJson(DirUrl.query, { dir_type: this.props.defaultDirId }); - if (data.err_code === RequestStatus.Ok) - { - let dirs = data.dirs as { dir_name: string; }[]; - if (this.props.dirNameFilter) - { - dirs = dirs.filter(dir => - { - return this.props.dirNameFilter.some(s => dir.dir_name.includes(s)); - }); - } - this.setState({ nodes: this._ParseNodes(dirs) }); - } - let currentDirProps = RightMaterialPanel.CurrentDirCache.get(this.props.defaultDirId); - if (currentDirProps) - { - this._LoadCurrentNode(currentDirProps); - } - await this._HandleGetData(); - setTimeout(() => - { - if (currentDirProps?.pathNum?.length && this._Tree) - { - let treeRoot = this._Tree.children[0].children[0]; - treeRoot.scrollTop = arrayLast(currentDirProps.pathNum) * 30; - } - }, 100); - }; - - _LoadCurrentNode = (currentDirProps: IDirectoryProps) => - { - let node: ITreeNode; - for (let n of currentDirProps.pathNum) - { - if (!node) - { - node = this.state.nodes[n]; - } - else - node = node.childNodes[n]; - if (!node) return; - if (node.childNodes.length) - node.isExpanded = true; - } - if (node) - { - this._SelectNode(node, true); - Object.assign(this._CurrentDir, currentDirProps); - } - }; - - _HandleSearch = async (e: React.ChangeEvent) => - { - this._SearchStr = e.currentTarget.value; - if (this._TimeId) - clearTimeout(this._TimeId); - this._TimeId = setTimeout(async () => - { - await this._HandleGetData(); - }, 500); - }; -} diff --git a/src/UI/Components/SourceManage/RightMyMaterialPanel.less b/src/UI/Components/SourceManage/RightMyMaterialPanel.less deleted file mode 100644 index 31d018f7e..000000000 --- a/src/UI/Components/SourceManage/RightMyMaterialPanel.less +++ /dev/null @@ -1,96 +0,0 @@ -#RightMyMaterialPanel { - height : 100px; - padding: 0; - - .searchMaterial{ - margin: 2px 0 0 0; - height: 34px; - - input{ - width: 100%; - } - } - - .materialParams{ - height: calc(100% - 34px); - - .img-tree { - height : 40%; - width : 100%; - padding : 0; - overflow: auto; - - .bp3-tree { - height : 100%; - padding-bottom: 10px; - box-shadow: none; - - &>ul { - max-height: 95%; - overflow : auto; - } - - .bp3-tree-node-content-1 { - padding-left: 10px; - } - } - } - - .img-lib { - width : 100%; - height : 60%; - padding : 0 10px; - overflow : visible; - position : relative; - display : flex; - flex-direction: column; - - &>:nth-child(1){ - flex: 1; - } - - .mat-list:first-child { - padding-bottom: 10px; - - li { - cursor: pointer; - } - - .look-mat { - user-select: none; - } - - &>li { - text-align: center; - - .hint:hover::before { - content : none; - } - - &>.bp3-control { - left: 10px; - top : 10; - } - - &>p { - margin-bottom: 0; - width : 100%; - } - } - } - - .bp3-dialog-container { - position: fixed; - left : 0; - top : 0; - z-index : 30; - - .bp3-dialog { - width : unset; - margin : 0; - padding: 0; - } - } - } - } -} diff --git a/src/UI/Css/dataList.less b/src/UI/Css/dataList.less index d68fba151..e97e0575d 100644 --- a/src/UI/Css/dataList.less +++ b/src/UI/Css/dataList.less @@ -2,11 +2,11 @@ list-style: none; padding: 0; - & > li { + &>li { outline: 1px solid #ccc; } - & > li.selected { + &>li.selected { background-color: #52aee7; color: #000; } @@ -20,7 +20,7 @@ position: relative; } - & > li.actived { + &>li.actived { border: 2px inset #1061ae; } } @@ -34,12 +34,12 @@ margin: 0; overflow: visible; - & > li { + &>li { display: flex; flex-direction: column; } - & > li { + &>li { outline: 1px solid #ccc; width: 20%; padding: 5px; @@ -57,24 +57,32 @@ } #data-list { + overflow: scroll; + height: 100%; + .info-header { display: flex; padding: 5px 0; - :nth-child(-n + 2) { + &>:first-child { + span { + margin-left: 50px; + } + } + + &>:nth-child(-n + 2) { flex: 3 3 0%; } - :nth-child(n + 3) { + &>:nth-child(n + 3) { flex: 2 2 0%; } } - overflow: scroll; - height: 100%; - .data-list-info { - & > li { + margin-top: 0; + + &>li { display: flex; align-items: center;