mirror of https://gitee.com/cf-fz/WebCAD.git
!2044 功能:公用模型发布
parent
7f26d39e89
commit
aba8d13a22
@ -0,0 +1,25 @@
|
||||
.resourceTree-card {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resourceTree-tree {
|
||||
flex-grow: 1;
|
||||
height: 100px;
|
||||
|
||||
.bp3-tree {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.resourceTree-state {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
@ -0,0 +1,144 @@
|
||||
import { Button, Card, Classes, Dialog, ITreeNode, Tree } from "@blueprintjs/core";
|
||||
import { action, IObservableValue, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import React from "react";
|
||||
import { ResourceLibraryURL } from "../../../Common/HostUrl";
|
||||
import { PostJson, RequestStatus } from "../../../Common/Request";
|
||||
import { Intent } from "../../../Common/Toaster";
|
||||
import { RenderClassList } from "../ToolBar/ResourceLibrary/ResourceInterfaces";
|
||||
import "./TemplateResourceTree.less";
|
||||
|
||||
interface ITemplateResourceTree
|
||||
{
|
||||
openResourceTree: IObservableValue<boolean>;
|
||||
handleNodeClick: (nodeId: number) => void;
|
||||
}
|
||||
@observer
|
||||
export class TemplateResourceTree extends React.Component<ITemplateResourceTree>
|
||||
{
|
||||
constructor(prop)
|
||||
{
|
||||
super(prop);
|
||||
this.GetResource();
|
||||
}
|
||||
|
||||
@observable isloading = false;
|
||||
private nodes: ITreeNode[] = [];
|
||||
@observable private currentNodeId: number;
|
||||
|
||||
@action
|
||||
async GetResource()
|
||||
{
|
||||
this.isloading = false;
|
||||
let response = await PostJson(ResourceLibraryURL.RenderClassList, { class_type: 1 }) as RenderClassList;
|
||||
if (response.err_code === RequestStatus.Ok)
|
||||
{
|
||||
this.nodes = this.parseNodes(response.class);
|
||||
}
|
||||
this.isloading = true;
|
||||
}
|
||||
|
||||
private handleNodeClick = (nodeData: ITreeNode, _nodePath: number[]) =>
|
||||
{
|
||||
this.isloading = false;
|
||||
this.currentNodeId = undefined;
|
||||
this.forEachNode(this.nodes, n => (n.isSelected = false));
|
||||
if (nodeData.childNodes.length === 0)
|
||||
{
|
||||
this.currentNodeId = Number(nodeData.id);
|
||||
nodeData.isSelected = true;
|
||||
}
|
||||
this.isloading = true;
|
||||
};
|
||||
|
||||
private forEachNode(nodes: ITreeNode[], callback: (node: ITreeNode) => void)
|
||||
{
|
||||
if (nodes == null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
for (const node of nodes)
|
||||
{
|
||||
callback(node);
|
||||
this.forEachNode(node.childNodes, callback);
|
||||
}
|
||||
}
|
||||
private handleNodeCollapse = (nodeData: ITreeNode, isCollapse: boolean) =>
|
||||
{
|
||||
this.isloading = false;
|
||||
nodeData.isExpanded = !isCollapse;
|
||||
this.isloading = true;
|
||||
};
|
||||
|
||||
private parseNodes = (dirs: any) =>
|
||||
{
|
||||
let newNodes: ITreeNode[] = [];
|
||||
if (!dirs) return newNodes;
|
||||
for (let dir of dirs)
|
||||
{
|
||||
let node: ITreeNode = {
|
||||
id: dir.id,
|
||||
label: dir.name,
|
||||
isExpanded: false,
|
||||
hasCaret: dir.c?.length > 0,
|
||||
className: dir.id,
|
||||
childNodes: this.parseNodes(dir.c),
|
||||
};
|
||||
newNodes.push(node);
|
||||
}
|
||||
return newNodes;
|
||||
};
|
||||
|
||||
handleClose = () =>
|
||||
{
|
||||
this.props.openResourceTree.set(false);
|
||||
};
|
||||
render(): React.ReactNode
|
||||
{
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={this.props.openResourceTree.get()}
|
||||
onClose={this.handleClose}
|
||||
icon="info-sign"
|
||||
title="选择模型库"
|
||||
usePortal={true}
|
||||
canOutsideClickClose={false}
|
||||
portalContainer={document.getElementById('modal')}
|
||||
portalClassName="select-img"
|
||||
style={{
|
||||
width: 300,
|
||||
height: 500
|
||||
}}
|
||||
>
|
||||
<Card className={Classes.DIALOG_BODY + " resourceTree-card"}>
|
||||
<div className="resourceTree-tree">
|
||||
{
|
||||
this.isloading && this.nodes &&
|
||||
<Tree
|
||||
contents={this.nodes}
|
||||
onNodeClick={this.handleNodeClick}
|
||||
onNodeCollapse={(node) => this.handleNodeCollapse(node, true)}
|
||||
onNodeExpand={(node) => this.handleNodeCollapse(node, false)}
|
||||
className={Classes.ELEVATION_0}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className="resourceTree-state">
|
||||
<Button
|
||||
disabled={!Boolean(this.currentNodeId)}
|
||||
text="发布"
|
||||
intent={Intent.SUCCESS}
|
||||
onClick={() => { this.props.handleNodeClick(this.currentNodeId); }}
|
||||
/>
|
||||
<Button
|
||||
text="取消"
|
||||
intent={Intent.DANGER}
|
||||
onClick={this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in new issue