mirror of https://gitee.com/cf-fz/WebCAD.git
!997 功能:模板标签
ChenX
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