decision-webui-dcm/src/modules/components/file_chooser/file_chooser.ts

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: 24,
            items: [
                {
                    type: BI.SignEditor.xtype,
                    cls: 'bi-border-bottom bi-focus-shadow',
                    width,
                    height: 22,
                    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);
    }
}