mirror of https://gitee.com/cf-fz/WebCAD.git
!997 功能:模板标签
parent
3b8b6228a5
commit
63599ab293
@ -0,0 +1,129 @@
|
||||
import { commandMachine } from "../../Editor/CommandMachine";
|
||||
import { ShowTemplate } from "./ShowTemplate";
|
||||
import { AppToaster } from "../../UI/Components/Toaster";
|
||||
import { Intent } from "@blueprintjs/core";
|
||||
import { PostJson, RequestStatus } from "../../Common/Request";
|
||||
import { ConfigUrls } from "../../Common/HostUrl";
|
||||
import { IndexedDbStore, StoreName } from "../../IndexedDb/IndexedDbStore";
|
||||
import { GetIndexDBID } from "../../Common/Utils";
|
||||
import { CommandList } from "../../UI/Components/CommandPanel/CommandList";
|
||||
import { arrayRemoveIf } from "../../Common/ArrayExt";
|
||||
|
||||
|
||||
export interface ITempTagProps
|
||||
{
|
||||
tagName: string;
|
||||
description: string;
|
||||
dirId: string;
|
||||
}
|
||||
|
||||
|
||||
export class TemplateTagCommand
|
||||
{
|
||||
//标签-id
|
||||
private _tagList: ITempTagProps[] = [];
|
||||
get TagList()
|
||||
{
|
||||
return this._tagList;
|
||||
}
|
||||
private CheckTagName(tagName: string)
|
||||
{
|
||||
let usedCmd = commandMachine.CommandMap.has(tagName) || CommandList.some(cmd => cmd.defaultCustom === tagName || cmd.command === tagName);
|
||||
|
||||
if (usedCmd && this._tagList.findIndex(tag => tag.tagName === tagName) < 0)
|
||||
{
|
||||
AppToaster.show({
|
||||
message: "该标签已注册为系统命令",
|
||||
timeout: 3000,
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
GetTagById(tid: string)
|
||||
{
|
||||
return this._tagList.find(tag => tag.dirId === tid);
|
||||
}
|
||||
GetTagByName(tagName: string)
|
||||
{
|
||||
return this._tagList.find(d => d.tagName === tagName);
|
||||
}
|
||||
AddTag(tagName: string, dirId: string)
|
||||
{
|
||||
tagName = tagName.toUpperCase();
|
||||
|
||||
if (!this.CheckTagName(tagName)) return;
|
||||
|
||||
let tag = this.GetTagByName(tagName);
|
||||
|
||||
if (!tag)
|
||||
tag = this.GetTagById(dirId);
|
||||
|
||||
if (!tag)
|
||||
{
|
||||
tag = {
|
||||
tagName,
|
||||
description: "",
|
||||
dirId: dirId,
|
||||
};
|
||||
this._tagList.push(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
commandMachine.RemoveCommand(tag.tagName);
|
||||
}
|
||||
tag.tagName = tagName;
|
||||
tag.dirId = dirId;
|
||||
|
||||
commandMachine.RegisterCommand(tagName, new ShowTemplate(tag));
|
||||
AppToaster.show({
|
||||
message: `标签:${tagName}添加成功`,
|
||||
timeout: 3000,
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
}
|
||||
RemoveTag(tagName: string)
|
||||
{
|
||||
arrayRemoveIf(this._tagList, tag => tag.tagName === tagName);
|
||||
commandMachine.RemoveCommand(tagName);
|
||||
AppToaster.show({
|
||||
message: `标签:${tagName}移除成功`,
|
||||
timeout: 3000,
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
}
|
||||
async UploadTagList()
|
||||
{
|
||||
let data = await PostJson(ConfigUrls.Edit, { key: TemplateTagCommand.name, value: JSON.stringify(this._tagList) });
|
||||
if (data.err_code === RequestStatus.Ok)
|
||||
{
|
||||
const dbStore = await IndexedDbStore.CADStore();
|
||||
dbStore.Put(StoreName.ConfigData, GetIndexDBID(TemplateTagCommand.name), this._tagList.slice());
|
||||
dbStore.Put(StoreName.ConfigVersion, GetIndexDBID(TemplateTagCommand.name), data.version);
|
||||
}
|
||||
}
|
||||
ReadTagList(tags: ITempTagProps[])
|
||||
{
|
||||
if (!Array.isArray(tags)) return;
|
||||
for (let tag of tags)
|
||||
{
|
||||
this._tagList.push(tag);
|
||||
commandMachine.RegisterCommand(tag.tagName, new ShowTemplate(tag));
|
||||
}
|
||||
}
|
||||
ModifyTagName(tagName: string, newName: string)
|
||||
{
|
||||
if (!this.CheckTagName(newName)) return;
|
||||
|
||||
let tag = this.GetTagByName(tagName);
|
||||
if (tag)
|
||||
{
|
||||
commandMachine.RemoveCommand(tagName);
|
||||
tag.tagName = newName;
|
||||
commandMachine.RegisterCommand(newName, new ShowTemplate(tag));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const templateTagCommand = new TemplateTagCommand();
|
@ -0,0 +1,223 @@
|
||||
import * as React from 'react';
|
||||
import { PostJson, RequestStatus } from '../../../Common/Request';
|
||||
import { TemplateUrls, CURRENT_HOST } from '../../../Common/HostUrl';
|
||||
import { observable } from 'mobx';
|
||||
import { IDrawerDoorTempInfo } from '../../Store/DoorInterface';
|
||||
import { templateTagCommand, ITempTagProps } from '../../../Add-on/Template/TemplateTagCommand';
|
||||
import { TemplateParamsIn, inflate } from '../../../Common/SerializeMaterial';
|
||||
import { TemplateDetail } from './TemplateDetail';
|
||||
import { INeedUpdateParams } from './TemplateComponent';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Card, Icon, Intent, ContextMenu, Menu, MenuItem } from '@blueprintjs/core';
|
||||
import { TemplateParam } from '../../../DatabaseServices/Template/Param/TemplateParam';
|
||||
import { Pagination } from '../SourceManage/Pagination';
|
||||
import { MouseKey } from '../../../Common/KeyEnum';
|
||||
import { HandleDirComponent } from '../SourceManage/HandleDirComponent';
|
||||
|
||||
export interface ITemplateTagComProps
|
||||
{
|
||||
currentTag: ITempTagProps;
|
||||
currentTemplateInfo: IDrawerDoorTempInfo;
|
||||
currentProps: INeedUpdateParams[];
|
||||
}
|
||||
|
||||
@observer
|
||||
export class TemplateTagCom extends React.Component<ITemplateTagComProps> {
|
||||
|
||||
@observable private params: TemplateParam[] = [];
|
||||
@observable private dataList = [];
|
||||
@observable private pageData = {
|
||||
count: 0,
|
||||
currentPage: 1,
|
||||
pageCount: 16,
|
||||
};
|
||||
@observable private currentTag: ITempTagProps = { tagName: "", dirId: "", description: "" };
|
||||
private canInput = observable.box(false);
|
||||
private isDesc = true;
|
||||
async UNSAFE_componentWillMount()
|
||||
{
|
||||
this.currentTag = this.props.currentTag;
|
||||
await this.readTemplateInfo();
|
||||
}
|
||||
componentWillUnmount()
|
||||
{
|
||||
templateTagCommand.UploadTagList();
|
||||
}
|
||||
public render()
|
||||
{
|
||||
return (
|
||||
<Card tabIndex={-1} className="flex" style={{ height: "100%" }}>
|
||||
<ul className="tag-name-list">
|
||||
{
|
||||
templateTagCommand.TagList.map(tag =>
|
||||
{
|
||||
return (
|
||||
<li className={tag.dirId === this.currentTag?.dirId ? "active" : ""} data-id={tag.tagName} onMouseDown={this.selectTemplateTag} >
|
||||
<Icon icon="tag" />
|
||||
{tag.tagName} | {tag.description}</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
<div className="tag-list">
|
||||
{
|
||||
this.dataList.map(d =>
|
||||
{
|
||||
return (
|
||||
<div className="tag-img"
|
||||
onClick={() => this.selectTemp(d)}
|
||||
>
|
||||
<div style={{ height: 0, paddingBottom: "100%", textAlign: "center" }}>
|
||||
<img src={d.logo} style={{ height: "auto", width: "80%" }} alt="" />
|
||||
</div>
|
||||
<p>{d.name}</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
{
|
||||
this.pageData.count > this.pageData.pageCount && <Pagination
|
||||
pageData={this.pageData}
|
||||
getImgListFun={this.readTemplateInfo}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<TemplateDetail
|
||||
className="tag-temp-detail"
|
||||
updateParams={this.props.currentProps}
|
||||
currentInfo={this.props.currentTemplateInfo}
|
||||
showSelectTemp={false}
|
||||
isUpload={true}
|
||||
disableKeys={undefined}
|
||||
isShowTag={false}
|
||||
params={this.params}
|
||||
/>
|
||||
{
|
||||
this.canInput.get() && <HandleDirComponent
|
||||
defualtValue={this.isDesc ? this.currentTag.description : this.currentTag.tagName}
|
||||
isReset={false}
|
||||
isOpen={this.canInput}
|
||||
title={this.isDesc ? "备注" : "标签名"}
|
||||
handleFunc={this.addTagDesc}
|
||||
/>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
private readTemplateInfo = async (pageData?: { curr_page: number; }) =>
|
||||
{
|
||||
if (pageData)
|
||||
this.pageData.currentPage = pageData.curr_page;
|
||||
let data = await PostJson(TemplateUrls.list, { dir_id: this.currentTag.dirId, page_count: this.pageData.pageCount, curr_page: this.pageData.currentPage });
|
||||
if (data.err_code === RequestStatus.Ok)
|
||||
{
|
||||
this.pageData.count = Number(data.count);
|
||||
let tempData = data.modules;
|
||||
observable(this.dataList).replace(tempData.map(d =>
|
||||
{
|
||||
return {
|
||||
logo: CURRENT_HOST + "/" + d.logo,
|
||||
mid: d.module_id,
|
||||
name: d.name,
|
||||
props: d.props,
|
||||
};
|
||||
}));
|
||||
|
||||
if (this.dataList.length === 1)
|
||||
{
|
||||
this.selectTemp(this.dataList[0]);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
private selectTemplateTag = async (e: React.MouseEvent<HTMLLIElement>) =>
|
||||
{
|
||||
if (e.button === MouseKey.Right)
|
||||
{
|
||||
this.showContextMenu(e);
|
||||
}
|
||||
|
||||
let tagName = e.currentTarget.getAttribute('data-id');
|
||||
Object.assign(this.currentTag, templateTagCommand.GetTagByName(tagName));
|
||||
await this.readTemplateInfo();
|
||||
};
|
||||
private _propsCache = new Map<string, TemplateParam[]>();
|
||||
private selectTemp(data: { mid: string, name: string, props: string; })
|
||||
{
|
||||
const { mid, name, props } = data;
|
||||
this.props.currentTemplateInfo.id = mid;
|
||||
this.props.currentTemplateInfo.name = name;
|
||||
let pars: TemplateParam[];
|
||||
if (this._propsCache.has(props))
|
||||
{
|
||||
pars = this._propsCache.get(props);
|
||||
}
|
||||
else
|
||||
pars = TemplateParamsIn(JSON.parse(inflate(props)));
|
||||
observable(this.params).replace(pars);
|
||||
observable(this.props.currentProps).replace(pars.map(p =>
|
||||
{
|
||||
return {
|
||||
name: p.name,
|
||||
value: p.value,
|
||||
description: p.description,
|
||||
expr: p.expr,
|
||||
};
|
||||
}));
|
||||
}
|
||||
//展示右键菜单
|
||||
private showContextMenu = (e: React.MouseEvent<HTMLElement>) =>
|
||||
{
|
||||
let tagName = e.currentTarget.getAttribute('data-id');
|
||||
ContextMenu.show(
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon="annotation"
|
||||
text="修改标签"
|
||||
onClick={() =>
|
||||
{
|
||||
this.isDesc = false;
|
||||
this.canInput.set(true);
|
||||
}}
|
||||
/>
|
||||
<MenuItem
|
||||
icon="comment"
|
||||
text="编辑描述"
|
||||
onClick={() =>
|
||||
{
|
||||
this.isDesc = true;
|
||||
this.canInput.set(true);
|
||||
}}
|
||||
/>
|
||||
<MenuItem
|
||||
icon="trash"
|
||||
text="移除标签"
|
||||
intent={Intent.DANGER}
|
||||
onClick={() => this.removeTag(tagName)}
|
||||
/>
|
||||
</Menu>,
|
||||
{ left: e.clientX, top: e.clientY },
|
||||
() => this.setState({ isContextMenuOpen: false }),
|
||||
);
|
||||
this.setState({ isContextMenuOpen: true });
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
private removeTag = (tagName: string) =>
|
||||
{
|
||||
if (confirm("确定移除标签?"))
|
||||
{
|
||||
this.dataList.length = 0;
|
||||
templateTagCommand.RemoveTag(tagName);
|
||||
}
|
||||
};
|
||||
private addTagDesc = (val: string) =>
|
||||
{
|
||||
if (this.isDesc)
|
||||
templateTagCommand.GetTagByName(this.currentTag.tagName).description = val;
|
||||
else
|
||||
templateTagCommand.ModifyTagName(this.currentTag.tagName, val.toUpperCase());
|
||||
this.canInput.set(false);
|
||||
};
|
||||
}
|
Loading…
Reference in new issue