!2154 新增:图片重命名

src/Common/HostUrl.ts

@@ -27,6 +27,7 @@ export const ImgsUrl = {
     upload: CURRENT_HOST + "/CAD-imageUpload",
     delete: CURRENT_HOST + "/CAD-imageDelete",
     logo: CURRENT_HOST + "/CAD-logoUpload",
+    update: CURRENT_HOST + "/CAD-imageUpdate"
 };
 export const DirUrl = {
     query: CURRENT_HOST + "/CAD-dirQuery",

src/UI/Components/SourceManage/ImgList.tsx

@@ -1,5 +1,5 @@
-import { Button, Card, Checkbox, Classes, Intent, Popover, Position } from '@blueprintjs/core';
-import { observable } from 'mobx';
+import { Button, Card, Checkbox, Classes, ContextMenu, Intent, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
+import { IObservableValue } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { app } from '../../../ApplicationServices/Application';
@@ -14,6 +14,8 @@ export interface IImgListProps
     store?: MaterialStore;
     select?: (e, data) => void;
     selectIds?: Set<string>;
+    isRename: IObservableValue<boolean>;
+    info: { fid: string, name: string; };
     showInfos?: boolean;
     isShowSize?: boolean;
 }
@@ -21,7 +23,6 @@ export interface IImgListProps
 @inject('store')
 @observer
 export class ImgList extends React.Component<IImgListProps, {}> {
-    @observable private isShowSize = false;
     renderEditorPanel(pic)
     {
         return (
@@ -60,7 +61,8 @@ export class ImgList extends React.Component<IImgListProps, {}> {
             </>
         );
     }
-    handleApplyPic = (pic) =>
+
+    _HandleApplyPic = (pic) =>
     {
         const store = this.props.store;
         if (store instanceof MaterialStore)
@@ -69,6 +71,32 @@ export class ImgList extends React.Component<IImgListProps, {}> {
             store.currentTextureTable.Name = app.Database.TextureTable.AllocateName();
         }
     };
+
+    _ShowContextMenu = (e: React.MouseEvent<HTMLElement>, data) =>
+    {
+
+        ContextMenu.show(
+            <Menu>
+                <MenuItem
+                    icon="folder-new"
+                    text="重命名"
+                    onClick={() =>
+                    {
+                        this.props.info.fid = data.image_id;
+                        this.props.info.name = data.name;
+                        this.props.isRename.set(true);
+                    }}
+                />
+            </Menu>,
+            { left: e.clientX, top: e.clientY },
+            () => this.setState({ isContextMenuOpen: false }),
+        );
+        this.setState({ isContextMenuOpen: true });
+
+        e.stopPropagation();
+        e.preventDefault();
+    };
+
     public render()
     {
         const isMatStore = this.props.store instanceof MaterialStore;
@@ -81,7 +109,8 @@ export class ImgList extends React.Component<IImgListProps, {}> {
                     select={this.props.select}
                     showInfos={this.props.showInfos}
                     selectData={this.props.selectIds}
-                    dbclickImg={(data) => this.handleApplyPic(data)}
+                    showContextMenu={this._ShowContextMenu}
+                    dbclickImg={(data) => this._HandleApplyPic(data)}
                     preview={true}
                     hintClassName={isMatStore && "apply-img-hint"}
                     renderButtons={(data) => <>
@@ -90,7 +119,7 @@ export class ImgList extends React.Component<IImgListProps, {}> {
                             <>
                                 <Button text="应用"
                                     intent={Intent.SUCCESS}
-                                    onClick={() => this.handleApplyPic(data)}
+                                    onClick={() => this._HandleApplyPic(data)}
                                 />
                             </>
                         }

src/UI/Components/SourceManage/TexturePanel.tsx

@@ -3,9 +3,11 @@ import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { ImgsUrl } from '../../../Common/HostUrl';
-import { DirectoryId } from '../../../Common/Request';
+import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
+import { AppToaster } from '../../Components/Toaster';
 import { MaterialStore } from '../../Store/MaterialStore';
 import { CommonPanel } from './CommonPanel';
+import { HandleDirComponent } from './HandleDirComponent';
 import { ImgList } from './ImgList';
 import { UploadComponent } from './UploadCom';
 
@@ -24,15 +26,20 @@ interface ITexturePanelProps
 @observer
 export class TexturePanel extends React.Component<ITexturePanelProps, ITexturePanelState>
 {
-    private startUpload = observable.box(false); //是否开始上传
-    private isApplyPanel: boolean = false;
+    _CommonPanel: CommonPanel;
+    _StartUpload = observable.box(false); //是否开始上传
+    _IsApplyPanel: boolean = false;
+    _CurrentFileInfo = { fid: null, name: null };
+    _CanCreateFile = observable.box(false);
+
     constructor(props)
     {
         super(props);
         this.state = {};
-        this.isApplyPanel = this.props.store instanceof MaterialStore;
+        this._IsApplyPanel = this.props.store instanceof MaterialStore;
     }
-    private renderNav = () =>
+
+    _RenderNav = () =>
     {
         return (
             <Button
@@ -42,33 +49,74 @@ export class TexturePanel extends React.Component<ITexturePanelProps, ITexturePa
                 }}
                 text="上传"
                 intent={Intent.SUCCESS}
-                onClick={() => this.startUpload.set(true)}
+                onClick={() => this._StartUpload.set(true)}
             />
         );
     };
-    private renderMenuItems = () =>
+
+    _HandleFile = async (name: string) =>
+    {
+        if (name !== "")
+        {
+            if (name.replace(/\s/g, "") === "")
+            {
+                AppToaster.show({
+                    message: "名称不能为空",
+                    timeout: 5000,
+                    intent: Intent.DANGER,
+                });
+            }
+            else if (name !== this._CurrentFileInfo.name)
+            {
+                let res = await PostJson(ImgsUrl.update, { image_id: this._CurrentFileInfo.fid, name });
+
+                if (res.err_code === RequestStatus.Ok)
+                    AppToaster.show({
+                        message: "修改成功!",
+                        timeout: 5000,
+                        intent: Intent.SUCCESS,
+                    });
+            }
+        }
+        await this._CommonPanel.handleGetData();
+        Object.assign(this._CurrentFileInfo, { fid: null, name: null });
+        this._CanCreateFile.set(false);
+    };
+
+    _RenderMenuItems = () =>
     {
         return (
             <MenuItem icon="cloud-upload" text="上传贴图"
-                onClick={() => this.startUpload.set(true)}
+                onClick={() => this._StartUpload.set(true)}
             />
         );
     };
+
     render()
     {
         return (
             <CommonPanel
+                ref={com => this._CommonPanel = com}
                 defaultDirId={DirectoryId.ImgDir}
-                renderNav={this.renderNav}
-                renderMenuItems={this.renderMenuItems}
-                canDelete={!this.isApplyPanel}
+                renderNav={this._RenderNav}
+                renderMenuItems={this._RenderMenuItems}
+                canDelete={!this._IsApplyPanel}
                 getUrl={ImgsUrl.get}
                 deleteUrl={ImgsUrl.delete}
                 canOrder={false}
+                handleDirComponent={
+                    this._CanCreateFile.get() && <HandleDirComponent
+                        defualtValue={this._CurrentFileInfo.name || ""}
+                        isReset={false}
+                        isOpen={this._CanCreateFile}
+                        handleFunc={this._HandleFile}
+                        title="输入文件名称"
+                    />
+                }
             >
-                <ImgList isShowSize={this.props.isShowSize} />
+                <ImgList isShowSize={this.props.isShowSize} isRename={this._CanCreateFile} info={this._CurrentFileInfo} />
                 <UploadComponent
-                    isOpen={this.startUpload}
+                    isOpen={this._StartUpload}
                 />
             </CommonPanel>
         );