|
|
|
@ -2,48 +2,109 @@ import { Button, Card, Checkbox, Classes, HTMLSelect, Intent, IOptionProps, Popo
|
|
|
|
|
import { action, observable } from 'mobx';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import * as React from 'react';
|
|
|
|
|
import { CustomNumberPanel, CustomNumberStore } from '../../../Add-on/CustomNumber/CustomNumberPanel';
|
|
|
|
|
import { CustomNumberItem } from '../../../Add-on/CustomNumber/CustomNumContainer';
|
|
|
|
|
import { app } from '../../../ApplicationServices/Application';
|
|
|
|
|
import { DrillStore } from '../../Store/DrillStore';
|
|
|
|
|
import { arrayRemoveOnce, mapSortByCN } from '../../../Common/ArrayExt';
|
|
|
|
|
import { userConfig } from '../../../Editor/UserConfig';
|
|
|
|
|
import { DrillingOption } from '../../Store/drillInterface';
|
|
|
|
|
import { DrillConfigSortType, DrillStore } from '../../Store/DrillStore';
|
|
|
|
|
import { userConfigStore } from '../../Store/UserConfigStore';
|
|
|
|
|
import { PopoverButton } from '../Common/PopoverButton';
|
|
|
|
|
import { DrillingTemplateManage } from '../Modal/DrillingTemplateManage';
|
|
|
|
|
import { AppToaster } from '../Toaster';
|
|
|
|
|
import { BoardModalType } from './BoardModalType';
|
|
|
|
|
import { DrillModal } from './GangDrillModal';
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { typeName: string; }>
|
|
|
|
|
export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { typeName: string; modifyTypeName: string; }>
|
|
|
|
|
{
|
|
|
|
|
constructor(props)
|
|
|
|
|
{
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
typeName: ""
|
|
|
|
|
typeName: "",
|
|
|
|
|
modifyTypeName: ""
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
private addDrillType = () =>
|
|
|
|
|
{
|
|
|
|
|
this.props.store.AddNewDrillType(this.state.typeName);
|
|
|
|
|
this.props.store.type = this.state.typeName;
|
|
|
|
|
this.props.store.currentConfigTypeName = this.state.typeName;
|
|
|
|
|
this.handleUpdate();
|
|
|
|
|
};
|
|
|
|
|
private modifyDrillTypeName = () =>
|
|
|
|
|
{
|
|
|
|
|
let key = this.props.store.currentConfigTypeName;
|
|
|
|
|
//要处理初始的配置
|
|
|
|
|
let config = this.props.store.defaultfDrillConfig;
|
|
|
|
|
let sortType = this.props.store.drillConfigSortType;
|
|
|
|
|
config.set(this.state.modifyTypeName, config.get(key));
|
|
|
|
|
config.delete(key);
|
|
|
|
|
|
|
|
|
|
//自定义单独删除
|
|
|
|
|
arrayRemoveOnce(this.props.store.customConfigSort, key);
|
|
|
|
|
this.props.store.customConfigSort.push(this.state.modifyTypeName);//加在最后
|
|
|
|
|
|
|
|
|
|
if (sortType === DrillConfigSortType.Default)
|
|
|
|
|
this.props.store.drillConfig = config;
|
|
|
|
|
else if (sortType === DrillConfigSortType.CH)
|
|
|
|
|
this.props.store.drillConfig = mapSortByCN(config);
|
|
|
|
|
else if (sortType === DrillConfigSortType.CHD) //按拼音首字母倒序
|
|
|
|
|
this.props.store.drillConfig = mapSortByCN(config, true);
|
|
|
|
|
else if (sortType === DrillConfigSortType.ZDY)
|
|
|
|
|
{
|
|
|
|
|
//自定义调取配置的customConfigSort列表 单独处理
|
|
|
|
|
this.props.store.drillConfig.set(this.state.modifyTypeName, config.get(this.state.modifyTypeName));
|
|
|
|
|
this.props.store.drillConfig.delete(key);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.props.store.currentConfigTypeName = this.state.modifyTypeName;
|
|
|
|
|
this.handleUpdate();
|
|
|
|
|
};
|
|
|
|
|
private handleOnChange = (e) =>
|
|
|
|
|
{
|
|
|
|
|
const store = this.props.store;
|
|
|
|
|
store.type = e.currentTarget.value;
|
|
|
|
|
store.currentConfigTypeName = e.currentTarget.value;
|
|
|
|
|
this.handleUpdate();
|
|
|
|
|
};
|
|
|
|
|
private handleOnChangeSortType = async (e) =>
|
|
|
|
|
{
|
|
|
|
|
let drillStore = this.props.store;
|
|
|
|
|
drillStore.drillConfigSortType = e.currentTarget.value;
|
|
|
|
|
|
|
|
|
|
if (e.currentTarget.value === DrillConfigSortType.Default)
|
|
|
|
|
drillStore.drillConfig = drillStore.defaultfDrillConfig;
|
|
|
|
|
else if (e.currentTarget.value === DrillConfigSortType.CH)
|
|
|
|
|
drillStore.drillConfig = mapSortByCN(drillStore.defaultfDrillConfig);
|
|
|
|
|
else if (e.currentTarget.value === DrillConfigSortType.CHD)//按拼音首字母倒序
|
|
|
|
|
drillStore.drillConfig = mapSortByCN(drillStore.defaultfDrillConfig, true);
|
|
|
|
|
else if (e.currentTarget.value === DrillConfigSortType.ZDY)
|
|
|
|
|
{
|
|
|
|
|
//自定义不采用初始的配置defaultfDrillConfig 要单独设置
|
|
|
|
|
drillStore.drillConfig.clear();
|
|
|
|
|
for (let key of drillStore.customConfigSort)
|
|
|
|
|
drillStore.drillConfig.set(key, drillStore.defaultfDrillConfig.get(key));
|
|
|
|
|
}
|
|
|
|
|
userConfig.DrillConfigs = drillStore.drillConfig;
|
|
|
|
|
};
|
|
|
|
|
private handleDelete = () =>
|
|
|
|
|
{
|
|
|
|
|
const store = this.props.store;
|
|
|
|
|
store.drillConfig.delete(store.type);
|
|
|
|
|
store.drillConfig.delete(store.currentConfigTypeName);
|
|
|
|
|
store.defaultfDrillConfig.delete(store.currentConfigTypeName);
|
|
|
|
|
arrayRemoveOnce(store.customConfigSort, store.currentConfigTypeName);
|
|
|
|
|
let types = [...store.drillConfig.keys()];
|
|
|
|
|
if (types.length > 0)
|
|
|
|
|
{
|
|
|
|
|
store.type = types[0];
|
|
|
|
|
store.currentConfigTypeName = types[0];
|
|
|
|
|
this.handleUpdate();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
private handleUpdate = action(() =>
|
|
|
|
|
{
|
|
|
|
|
const store = this.props.store;
|
|
|
|
|
observable(store.rules).replace(store.drillConfig.get(store.type));
|
|
|
|
|
observable(store.rules).replace(store.drillConfig.get(store.currentConfigTypeName));
|
|
|
|
|
store.ChangeRules(0);
|
|
|
|
|
});
|
|
|
|
|
private renderRadiosType = () =>
|
|
|
|
@ -52,7 +113,7 @@ export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { type
|
|
|
|
|
return (
|
|
|
|
|
<RadioGroup
|
|
|
|
|
inline={true}
|
|
|
|
|
selectedValue={store.type}
|
|
|
|
|
selectedValue={store.currentConfigTypeName}
|
|
|
|
|
onChange={this.handleOnChange}
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
@ -67,11 +128,69 @@ export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { type
|
|
|
|
|
const options = [...store.drillConfig.keys()];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<HTMLSelect
|
|
|
|
|
value={store.type}
|
|
|
|
|
options={options}
|
|
|
|
|
onChange={this.handleOnChange}
|
|
|
|
|
/>
|
|
|
|
|
<div className='drillOptionSelect'>
|
|
|
|
|
<HTMLSelect
|
|
|
|
|
value={store.currentConfigTypeName}
|
|
|
|
|
options={options}
|
|
|
|
|
onChange={this.handleOnChange}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ marginTop: -2 }}>
|
|
|
|
|
<span>排序:</span>
|
|
|
|
|
<HTMLSelect
|
|
|
|
|
className='drillSortType'
|
|
|
|
|
value={store.drillConfigSortType}
|
|
|
|
|
options={[
|
|
|
|
|
{ label: "默认", value: DrillConfigSortType.Default },
|
|
|
|
|
{ label: "按拼音首字母", value: DrillConfigSortType.CH },
|
|
|
|
|
{ label: "按拼音首字母倒序", value: DrillConfigSortType.CHD },
|
|
|
|
|
{ label: "自定义排序", value: DrillConfigSortType.ZDY },
|
|
|
|
|
]}
|
|
|
|
|
onChange={this.handleOnChangeSortType}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
className='popover'
|
|
|
|
|
text="自定义排序"
|
|
|
|
|
intent={Intent.NONE}
|
|
|
|
|
onClick={async () =>
|
|
|
|
|
{
|
|
|
|
|
app.Editor.ModalManage.Destory();
|
|
|
|
|
let store = new CustomNumberStore();
|
|
|
|
|
store.title = "排钻类型排序自定义";
|
|
|
|
|
store.label = "排钻类型";
|
|
|
|
|
store.orderName = "排序";
|
|
|
|
|
let drillList = [...this.props.store.drillConfig.keys()];
|
|
|
|
|
for (let i = 0; i < drillList.length; i++)
|
|
|
|
|
store.option.items.push({ id: i + 1, text: drillList[i] });
|
|
|
|
|
|
|
|
|
|
store.onChange = (items: CustomNumberItem[], dragIndex: number, hoverIndex: number) =>
|
|
|
|
|
{
|
|
|
|
|
store.option.items = items;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
store.onOk = async () =>
|
|
|
|
|
{
|
|
|
|
|
//得到自定义排序的list 上传配置
|
|
|
|
|
let newDrillConfigMap: Map<string, DrillingOption[]> = new Map();
|
|
|
|
|
for (let item of store.option.items)
|
|
|
|
|
{
|
|
|
|
|
newDrillConfigMap.set(item.text, this.props.store.drillConfig.get(item.text));
|
|
|
|
|
}
|
|
|
|
|
this.props.store.drillConfig = newDrillConfigMap;
|
|
|
|
|
this.props.store.customConfigSort = [...newDrillConfigMap.keys()];
|
|
|
|
|
this.props.store.drillConfigSortType = DrillConfigSortType.ZDY;
|
|
|
|
|
|
|
|
|
|
//自定义后自动保存配置
|
|
|
|
|
await userConfigStore.SaveConfig(BoardModalType.Dr, this.props.store);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
app.Editor.ModalManage.RenderModal(CustomNumberPanel, { store });
|
|
|
|
|
await app.Editor.ModalManage.Wait();
|
|
|
|
|
|
|
|
|
|
app.Editor.ModalManage.RenderModal(DrillModal, { store: this.props.store });
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
render()
|
|
|
|
@ -83,9 +202,10 @@ export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { type
|
|
|
|
|
{
|
|
|
|
|
store.drillConfig.size > 7 ? this.renderSelectType() : this.renderRadiosType()
|
|
|
|
|
}
|
|
|
|
|
<div>
|
|
|
|
|
<div style={{ display: "flex" }}>
|
|
|
|
|
<Popover
|
|
|
|
|
position={Position.LEFT}
|
|
|
|
|
className='popover'
|
|
|
|
|
position={Position.TOP}
|
|
|
|
|
onClosed={() => this.setState({ typeName: "" })}
|
|
|
|
|
usePortal={false}
|
|
|
|
|
content={
|
|
|
|
@ -110,7 +230,54 @@ export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { type
|
|
|
|
|
intent={Intent.PRIMARY}
|
|
|
|
|
/>}
|
|
|
|
|
/>
|
|
|
|
|
<Popover
|
|
|
|
|
className='popover'
|
|
|
|
|
position={Position.TOP}
|
|
|
|
|
usePortal={false}
|
|
|
|
|
content={
|
|
|
|
|
<Card>
|
|
|
|
|
<input type="text"
|
|
|
|
|
style={{ height: 30 }}
|
|
|
|
|
className={Classes.INPUT}
|
|
|
|
|
value={this.state.modifyTypeName}
|
|
|
|
|
autoFocus={true}
|
|
|
|
|
onFocus={(e) => { e.target.select(); }}
|
|
|
|
|
onChange={e => this.setState({ modifyTypeName: e.target.value })}
|
|
|
|
|
onKeyDown={(e => { e.stopPropagation(); })}
|
|
|
|
|
onKeyUp={(e) => { e.currentTarget.value = e.currentTarget.value.replace(/\s+/g, ''); }}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
text="确定"
|
|
|
|
|
className={Classes.POPOVER_DISMISS}
|
|
|
|
|
style={{ margin: 0 }}
|
|
|
|
|
intent={Intent.SUCCESS}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
{
|
|
|
|
|
if (this.props.store.currentConfigTypeName === this.state.modifyTypeName) return;
|
|
|
|
|
if (this.props.store.drillConfig.has(this.state.modifyTypeName))
|
|
|
|
|
{
|
|
|
|
|
AppToaster.show({
|
|
|
|
|
message: "存在该类型名称!",
|
|
|
|
|
timeout: 5000,
|
|
|
|
|
intent: Intent.DANGER,
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.modifyDrillTypeName();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
}
|
|
|
|
|
target={
|
|
|
|
|
<Button
|
|
|
|
|
text="修改类型名称"
|
|
|
|
|
intent={Intent.SUCCESS}
|
|
|
|
|
onClick={() => this.setState({ modifyTypeName: store.currentConfigTypeName })}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<PopoverButton
|
|
|
|
|
className='popover'
|
|
|
|
|
message="确认删除选择类型?"
|
|
|
|
|
targetTitle="删除选中类型"
|
|
|
|
|
confirmCallback={this.handleDelete}
|
|
|
|
|