|
|
|
|
@ -1,8 +1,8 @@
|
|
|
|
|
import { Alignment, Button, Card, Checkbox, Classes, ContextMenu, Intent, ITreeNode, Menu, MenuItem, Navbar, Popover, Position, Tree, HTMLSelect } from '@blueprintjs/core';
|
|
|
|
|
import { observable } from 'mobx';
|
|
|
|
|
import { observable, toJS } from 'mobx';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import * as React from 'react';
|
|
|
|
|
import { DirUrl } from '../../../Common/HostUrl';
|
|
|
|
|
import { DirUrl, FileUrls } from '../../../Common/HostUrl';
|
|
|
|
|
import { MouseKey } from '../../../Common/KeyEnum';
|
|
|
|
|
import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
|
|
|
|
|
import { AppToaster } from '../Toaster';
|
|
|
|
|
@ -10,6 +10,7 @@ import { HandleDirComponent } from './HandleDirComponent';
|
|
|
|
|
import { Pagination } from './Pagination';
|
|
|
|
|
import './TexturePanel.less';
|
|
|
|
|
import { PopoverButton } from '../Common/PopoverButton';
|
|
|
|
|
import { arrayLast } from '../../../Common/ArrayExt';
|
|
|
|
|
|
|
|
|
|
export interface IDirectoryProps
|
|
|
|
|
{
|
|
|
|
|
@ -70,7 +71,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
pageCount: 20
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private nodeEls: HTMLElement[];
|
|
|
|
|
constructor(props)
|
|
|
|
|
{
|
|
|
|
|
super(props);
|
|
|
|
|
@ -152,6 +153,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
{
|
|
|
|
|
nodeData.isExpanded = !isCollapse;
|
|
|
|
|
this.setState(this.state);
|
|
|
|
|
this.updateNodeEls();
|
|
|
|
|
};
|
|
|
|
|
//获取当前目录路径
|
|
|
|
|
private getCurrentDir = (dirId: React.ReactText, nodePath: number[]) =>
|
|
|
|
|
@ -238,6 +240,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
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);
|
|
|
|
|
@ -282,6 +285,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
if (data.err_code === RequestStatus.Ok)
|
|
|
|
|
{
|
|
|
|
|
this.addTreeNodes(data);
|
|
|
|
|
this.updateNodeEls();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//添加目录UI节点
|
|
|
|
|
@ -372,6 +376,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
observable(this.dataList).clear();
|
|
|
|
|
Object.assign(this.currentDir, { id: this.props.defaultDirId, path: "", pathNum: [] });
|
|
|
|
|
await this.handleGetData();
|
|
|
|
|
this.updateNodeEls();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 删除目录的UI节点
|
|
|
|
|
@ -455,6 +460,29 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
this.needDeleteData.clear();
|
|
|
|
|
this.setState({ isSelectAll: false });
|
|
|
|
|
}
|
|
|
|
|
private getSelectDataIds = () =>
|
|
|
|
|
{
|
|
|
|
|
const getQuery = (idKey: string) =>
|
|
|
|
|
{
|
|
|
|
|
let deleteMats = this.state.isSelectAll ? this.dataList : [...this.needDeleteData];
|
|
|
|
|
return deleteMats.map(m => m[idKey]);
|
|
|
|
|
}
|
|
|
|
|
if (this.props.defaultDirId === DirectoryId.ImgDir)
|
|
|
|
|
return getQuery("image_id");
|
|
|
|
|
else if (this.props.defaultDirId === DirectoryId.MaterialDir)
|
|
|
|
|
return getQuery("material_id");
|
|
|
|
|
else if (this.props.defaultDirId === DirectoryId.ToplineDir)
|
|
|
|
|
return getQuery("topline_id");
|
|
|
|
|
else if (this.props.defaultDirId === DirectoryId.FileDir)
|
|
|
|
|
return getQuery("file_id");
|
|
|
|
|
else if (this.props.defaultDirId === DirectoryId.TemplateDir)
|
|
|
|
|
return getQuery("module_id");
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
console.warn("未知目录id");
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//删除数据
|
|
|
|
|
private handDeleteData = async (dataList?) =>
|
|
|
|
|
{
|
|
|
|
|
@ -499,20 +527,104 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
if (this.props.delete)
|
|
|
|
|
this.props.delete(query);
|
|
|
|
|
}
|
|
|
|
|
async UNSAFE_componentWillMount()
|
|
|
|
|
private handleMoveFiles = async (e: DragEvent) =>
|
|
|
|
|
{
|
|
|
|
|
//初始化目录
|
|
|
|
|
let data = await PostJson(DirUrl.query, { dir_type: this.props.defaultDirId });
|
|
|
|
|
if (data.err_code === RequestStatus.Ok)
|
|
|
|
|
if (this.props.defaultDirId === DirectoryId.ImgDir)
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let targetId: string;
|
|
|
|
|
let el = e.target as HTMLElement;
|
|
|
|
|
while (true)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ nodes: this.parseNodes(data.dirs) })
|
|
|
|
|
if (el.nodeName === "LI")
|
|
|
|
|
{
|
|
|
|
|
el.firstElementChild.classList.remove('moveenter');
|
|
|
|
|
targetId = arrayLast(Array.from(el.classList));
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
el = el.parentElement;
|
|
|
|
|
if (el === null || el === this.tree)
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
let dataIds = this.getSelectDataIds();
|
|
|
|
|
if (targetId && dataIds.length > 0)
|
|
|
|
|
{
|
|
|
|
|
let url = "";
|
|
|
|
|
let query: any = { dir_id: targetId };
|
|
|
|
|
switch (this.props.defaultDirId)
|
|
|
|
|
{
|
|
|
|
|
case DirectoryId.FileDir:
|
|
|
|
|
url = FileUrls.move;
|
|
|
|
|
query.file_ids = dataIds;
|
|
|
|
|
break;
|
|
|
|
|
case DirectoryId.MaterialDir:
|
|
|
|
|
url = FileUrls.move;
|
|
|
|
|
query.material_ids = dataIds;
|
|
|
|
|
break;
|
|
|
|
|
case DirectoryId.ToplineDir:
|
|
|
|
|
url = FileUrls.move;
|
|
|
|
|
query.topline_ids = dataIds;
|
|
|
|
|
break;
|
|
|
|
|
case DirectoryId.TemplateDir:
|
|
|
|
|
url = FileUrls.move;
|
|
|
|
|
query.module_ids = dataIds;
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
console.warn("未知id");
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let data = await PostJson(url, query);
|
|
|
|
|
if (data.err_code === RequestStatus.Ok)
|
|
|
|
|
{
|
|
|
|
|
AppToaster.show({
|
|
|
|
|
message: "文件移动成功",
|
|
|
|
|
timeout: 1500,
|
|
|
|
|
intent: Intent.SUCCESS
|
|
|
|
|
});
|
|
|
|
|
await this.handleGetData();
|
|
|
|
|
}
|
|
|
|
|
componentDidMount()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
private handleDragEnterFile = (e: DragEvent) =>
|
|
|
|
|
{
|
|
|
|
|
//监听右键其他位置
|
|
|
|
|
this.tree.addEventListener('mousedown', e =>
|
|
|
|
|
let el = e.target as HTMLLIElement;
|
|
|
|
|
if (el.nodeName === "DIV" && el.parentElement.nodeName === "LI")
|
|
|
|
|
{
|
|
|
|
|
this.handleDragEnd();
|
|
|
|
|
el.classList.add("moveenter");
|
|
|
|
|
let targetId = arrayLast(Array.from(el.parentElement.classList));
|
|
|
|
|
let nodeData = this.state.nodes.find(node => node.id === targetId && node.childNodes.length > 0);
|
|
|
|
|
if (nodeData && !nodeData.isExpanded)
|
|
|
|
|
this.handleNodeCollapse(nodeData, false);
|
|
|
|
|
}
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
private handleDragLeave = (e: DragEvent) =>
|
|
|
|
|
{
|
|
|
|
|
let el = e.target as HTMLLIElement;
|
|
|
|
|
if (el.classList.contains("bp3-tree"))
|
|
|
|
|
{
|
|
|
|
|
this.handleDragEnd();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (el.nodeName === "DIV" && el.parentElement.nodeName === "LI")
|
|
|
|
|
{
|
|
|
|
|
let el2 = e.relatedTarget as HTMLElement;
|
|
|
|
|
while (true)
|
|
|
|
|
{
|
|
|
|
|
if (el2.nodeName === "DIV" && el2.parentElement.nodeName === "LI") break;
|
|
|
|
|
el2 = el2.parentElement;
|
|
|
|
|
if (el2 === null || el2 === this.tree) break;
|
|
|
|
|
if (el2 === el) return false;
|
|
|
|
|
}
|
|
|
|
|
el.classList.remove('moveenter');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//点击节点容器的动作
|
|
|
|
|
private handleTreeMouseDown = (e: MouseEvent) =>
|
|
|
|
|
{
|
|
|
|
|
let el = e.target as HTMLElement;
|
|
|
|
|
if (e.button === MouseKey.Right)
|
|
|
|
|
@ -535,7 +647,45 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
private updateNodeEls = () =>
|
|
|
|
|
{
|
|
|
|
|
this.nodeEls = Array.from(this.tree.querySelectorAll(".bp3-tree-node-content"));
|
|
|
|
|
}
|
|
|
|
|
private handleDragEnd = () =>
|
|
|
|
|
{
|
|
|
|
|
for (let node of this.nodeEls)
|
|
|
|
|
{
|
|
|
|
|
node.classList.remove("moveenter");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
async UNSAFE_componentWillMount()
|
|
|
|
|
{
|
|
|
|
|
//初始化目录
|
|
|
|
|
let data = await PostJson(DirUrl.query, { dir_type: this.props.defaultDirId });
|
|
|
|
|
if (data.err_code === RequestStatus.Ok)
|
|
|
|
|
{
|
|
|
|
|
this.setState({ nodes: this.parseNodes(data.dirs) })
|
|
|
|
|
}
|
|
|
|
|
await this.handleGetData();
|
|
|
|
|
}
|
|
|
|
|
componentDidMount()
|
|
|
|
|
{
|
|
|
|
|
//监听右键其他位置
|
|
|
|
|
this.tree.addEventListener('mousedown', this.handleTreeMouseDown);
|
|
|
|
|
this.tree.addEventListener('dragenter', this.handleDragEnterFile);
|
|
|
|
|
this.tree.addEventListener('dragleave', this.handleDragLeave);
|
|
|
|
|
this.tree.addEventListener("drop", this.handleMoveFiles);
|
|
|
|
|
document.addEventListener('dragend', this.handleDragEnd);
|
|
|
|
|
this.updateNodeEls();
|
|
|
|
|
}
|
|
|
|
|
componentWillUnmount()
|
|
|
|
|
{
|
|
|
|
|
this.tree.removeEventListener('mousedown', this.handleTreeMouseDown);
|
|
|
|
|
this.tree.removeEventListener('dragenter', this.handleDragEnterFile);
|
|
|
|
|
this.tree.removeEventListener('dragleave', this.handleDragLeave);
|
|
|
|
|
this.tree.removeEventListener("drop", this.handleMoveFiles);
|
|
|
|
|
document.removeEventListener('dragend', this.handleDragEnd);
|
|
|
|
|
}
|
|
|
|
|
render()
|
|
|
|
|
{
|
|
|
|
|
@ -634,7 +784,12 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
|
|
|
|
|
className={Classes.ELEVATION_0}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<Card className="img-lib">
|
|
|
|
|
<Card
|
|
|
|
|
className="img-lib"
|
|
|
|
|
onDragStart={e =>
|
|
|
|
|
{
|
|
|
|
|
if (this.needDeleteData.size === 0) e.preventDefault();
|
|
|
|
|
}}>
|
|
|
|
|
{
|
|
|
|
|
React.Children.map(this.props.children, child =>
|
|
|
|
|
child && React.cloneElement(child as React.DetailedReactHTMLElement<any, any>,
|
|
|
|
|
|
ChenX