12 changed files with 1486 additions and 543 deletions
@ -0,0 +1,68 @@
|
||||
import { model, Model } from '@core/core'; |
||||
|
||||
type RootInfo = { |
||||
url: string; // api url
|
||||
prefix: string; // 路径前缀
|
||||
root: string; // 根文件夹名称
|
||||
}; |
||||
|
||||
export const ROOT_INFO_MAP: Record<string, RootInfo> = { |
||||
// 证书 resources/certificates/
|
||||
certificates: { |
||||
url: '/v10/certificates/all', |
||||
prefix: 'resources/', |
||||
root: 'certificates', |
||||
}, |
||||
}; |
||||
|
||||
@model() |
||||
export class FileChooserModel extends Model { |
||||
static xtype = 'dec.dcm.model.components.file_chooser'; |
||||
|
||||
private options: { |
||||
root: string; |
||||
}; |
||||
|
||||
state() { |
||||
return { |
||||
keyword: '', // 搜索关键字
|
||||
items: [], // 文件项
|
||||
}; |
||||
} |
||||
|
||||
actions = { |
||||
/** |
||||
* 请求获取items |
||||
* @param callback 回调 |
||||
*/ |
||||
requestGetItems: (callback?: Function) => { |
||||
const { keyword } = this.model; |
||||
const { url, prefix, root } = ROOT_INFO_MAP[this.options.root]; |
||||
const requestUrl = `${url}?keyword=${encodeURIComponent(keyword)}`; |
||||
Dec.reqGetHandle(requestUrl, '', (data) => { |
||||
this.model.items = data |
||||
.concat({ |
||||
id: root, |
||||
text: root, |
||||
value: prefix + root, |
||||
}) |
||||
.map((item) => ({ |
||||
...item, |
||||
text: item.id, |
||||
value: prefix + item.path, |
||||
open: item.id === root || BI.isKey(keyword), |
||||
})); |
||||
BI.isFunction(callback) && callback(); |
||||
}); |
||||
}, |
||||
|
||||
/** |
||||
* 设置keyword |
||||
* @param value |
||||
*/ |
||||
setKeyword: (value: string) => { |
||||
this.model.keyword = value; |
||||
this.requestGetItems(); |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,182 @@
|
||||
import { EVENT_CHANGE } from './../collapse/collapse'; |
||||
import { shortcut, store } from '@core/core'; |
||||
import { SignEditor, MultiLayerSingleLevelTree, SearchEditor, Button, Editor } from '@fui/core'; |
||||
import { FileChooserModel } from './file_chooser.model'; |
||||
|
||||
@shortcut() |
||||
@store(FileChooserModel, { |
||||
props(this: FileChooser) { |
||||
return this.options; |
||||
}, |
||||
}) |
||||
export class FileChooser extends BI.Widget { |
||||
static xtype = 'dec.dcm.components.file_chooser'; |
||||
|
||||
props = { |
||||
width: 300, |
||||
root: '', // 含义见model中的RootInfo
|
||||
watermark: '', |
||||
value: '', |
||||
}; |
||||
|
||||
model: FileChooserModel['model']; |
||||
store: FileChooserModel['store']; |
||||
watch = { |
||||
items: (value) => { |
||||
this.fileTree.populate(value); |
||||
}, |
||||
}; |
||||
|
||||
textEditor: SignEditor; |
||||
keywordEditor: SearchEditor; |
||||
fileTree: MultiLayerSingleLevelTree; |
||||
sureButton: Button; |
||||
|
||||
render() { |
||||
const { width, watermark, value } = this.options; |
||||
|
||||
return { |
||||
type: BI.VerticalAdaptLayout.xtype, |
||||
height: 20, |
||||
items: [ |
||||
{ |
||||
type: BI.SignEditor.xtype, |
||||
cls: 'bi-border bi-focus-shadow', |
||||
width, |
||||
watermark, |
||||
title: value, |
||||
value, |
||||
ref: (_ref: SignEditor) => { |
||||
this.textEditor = _ref; |
||||
}, |
||||
listeners: [ |
||||
{ |
||||
eventName: BI.SignEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.textEditor.getValue(); |
||||
this.setValue(value); |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
el: { |
||||
type: BI.Button.xtype, |
||||
|
||||
text: BI.i18nText('Dec-Basic_Choose_File'), |
||||
clear: true, |
||||
handler: () => { |
||||
this.openFileChoosePopover(); |
||||
}, |
||||
}, |
||||
lgap: 10, |
||||
}, |
||||
], |
||||
}; |
||||
} |
||||
|
||||
getValue(): string { |
||||
return this.textEditor.getValue(); |
||||
} |
||||
|
||||
setValue(value: string) { |
||||
this.options.value = value; |
||||
this.textEditor.text.setTitle(value); |
||||
this.textEditor.setValue(value); |
||||
} |
||||
|
||||
/** |
||||
* 打开文件选择弹窗 |
||||
*/ |
||||
private openFileChoosePopover() { |
||||
// 重置搜索关键词
|
||||
this.store.setKeyword(''); |
||||
// 创建并显示窗口
|
||||
const popoverName = BI.UUID(); |
||||
BI.Popovers.create( |
||||
popoverName, |
||||
{ |
||||
header: BI.i18nText('Dec-Data_Set_File_Select_Server_File'), |
||||
body: { |
||||
type: BI.VTapeLayout.xtype, |
||||
items: [ |
||||
{ |
||||
type: BI.SearchEditor.xtype, |
||||
ref: (ref: SearchEditor) => { |
||||
this.keywordEditor = ref; |
||||
}, |
||||
height: 24, |
||||
value: this.model.keyword, |
||||
listeners: [ |
||||
{ |
||||
eventName: BI.SearchEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.keywordEditor.getValue(); |
||||
this.store.setKeyword(value); |
||||
}, |
||||
}, |
||||
{ |
||||
eventName: BI.SearchEditor.EVENT_CLEAR, |
||||
action: () => { |
||||
this.store.setKeyword(''); |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
el: { |
||||
type: BI.MultiLayerSingleLevelTree.xtype, |
||||
ref: (ref: MultiLayerSingleLevelTree) => { |
||||
this.fileTree = ref; |
||||
}, |
||||
keywordGetter: () => this.model.keyword, |
||||
items: this.model.items, |
||||
listeners: [ |
||||
{ |
||||
eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, |
||||
action: () => { |
||||
this.sureButton.setEnable(true); |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
tgap: 15, |
||||
}, |
||||
{ |
||||
type: BI.RightVerticalAdaptLayout.xtype, |
||||
height: 24, |
||||
vgap: 10, |
||||
items: [ |
||||
{ |
||||
type: BI.Button.xtype, |
||||
text: BI.i18nText('BI-Basic_Cancel'), |
||||
level: 'ignore', |
||||
handler: () => { |
||||
BI.Popovers.remove(popoverName); |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: BI.Button.xtype, |
||||
ref: (ref: Button) => { |
||||
this.sureButton = ref; |
||||
}, |
||||
text: BI.i18nText('BI-Basic_OK'), |
||||
disabled: true, |
||||
handler: () => { |
||||
const value = this.fileTree.getValue()[0]; |
||||
this.setValue(value); |
||||
BI.Popovers.remove(popoverName); |
||||
}, |
||||
}, |
||||
lgap: 10, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
}, |
||||
this |
||||
).show(popoverName); |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue