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

import { shortcut, store } from '@core/core';
import { SignEditor, MultiLayerSingleLevelTree, SearchEditor, Button, Editor, Label } from '@fui/core';
import { FileUploadModel } from './file_upload.model';
import { ApiFactory } from 'src/modules/crud/apiFactory';
import './file_upload.less';

const api = new ApiFactory().create();

@shortcut()
@store(FileUploadModel, {
    props(this: FileUpload) {
        return this.options;
    },
})
export class FileUpload extends BI.Widget {
    public static xtype = "dec.dcm.components.file_upload";
    public static EVENT_CHECK_SUCCESS = 'EVENT_CHECK_SUCCESS';
    public static EVENT_CLEAR_FILE = 'EVENT_CLEAR_FILE';

    public props = {
        watermark: '',
        value: '',
        processId: '',
        disabled: false,
        inter: '',
        access: '',
        iconCls: ''
    };

    model: FileUploadModel['model'];
    store: FileUploadModel['store'];
    watch = {
        uploadUrl: function () {
            this.uploader.setUrl(this.model.uploadUrl);
        },
    };

    public textEditor: SignEditor;
    public keywordEditor: SearchEditor;
    public fileTree: MultiLayerSingleLevelTree;
    public sureButton: Button;
    public infoLabel: Label;

    public render() {
        const { width, watermark, value, processId, inter } = this.options;
        let self = this;
        const processName = BI.concat("process-", processId);
        const processClass = BI.concat(".process-", processId);
        this.setFileInfo({
            keytabPath: '',
            principal:'',
            krb5ConfPath: '',
        });

        return {
            type: BI.VerticalLayout.xtype,
            items:[{
                type: BI.FloatLeftLayout.xtype,
                items: [
                    {
                        type: BI.SignEditor.xtype,
                        cls: 'bi-border bi-focus-shadow',
                        width: 300,
                        height: 22,
                        watermark,
                        disabled: true,
                        value,
                        ref: (_ref: SignEditor) => {
                            this.textEditor = _ref;
                        },
                        listeners: [
                            {
                                eventName: BI.SignEditor.EVENT_CHANGE,
                                action: () => {
                                    const value = this.textEditor.getValue();
                                    this.setValue(value);
                                },
                            },
                        ],
                    }, {
                        type: BI.Button.xtype,
                        width: 100,
                        _lgap: 10,
                        iconCls: "upload-font",
                        level: "ignore",
                        ghost: true,
                        ref: (_ref: Button) => {
                            this.uploadButton = _ref;
                        },
                        text: BI.i18nText('Dec-Basic_Choose_File'),
                        handler: () => {
                            this.uploader.select();
                        },
                    },
                ],
            }, {
                type: BI.FloatLeftLayout.xtype,
                tgap: 8,
                invisible: true,
                ref: (_ref) => {
                    this.fileInfo = _ref;
                },
                items: [
                    {
                        type: BI.VerticalLayout.xtype,
                        cls: "bi-border",
                        items: [{
                            type: BI.HTapeLayout.xtype,
                            height: 68,
                            width: 300,
                            items: [{
                                el: {
                                    type: BI.IconLabel.xtype,
                                    cls: this.options.iconCls,
                                },
                                width: 48,
                                lgap: 8,
                            }, {
                                el: {
                                    type: BI.VerticalLayout.xtype,
                                    items : [{
                                        type: BI.Label.xtype,
                                        width: 200,
                                        height: 20,
                                        textAlign: "left",
                                        ref: (_ref: Label) => {
                                            this.fileName = _ref;
                                        },
                                    },{
                                        type: BI.VerticalAdaptLayout.xtype,
                                        items: [{
                                            type: BI.Label.xtype,
                                            cls: "bi-tips",
                                            height: 20,
                                            rgap: 3,
                                            ref: (_ref: Label) => {
                                                this.fileSize = _ref;
                                            },
                                        }, {
                                            type: BI.Label.xtype,
                                            cls: "bi-tips",
                                            height: 20,
                                            ref: (_ref: Label) => {
                                                this.fileModified = _ref;
                                            },
                                        }]
    
                                    }],
    
                                },
                                tgap: 14,
                                lgap: 4,
                            }, {
                                el: {
                                    type: BI.IconButton.xtype,
                                    cls: "default-delete-font",
                                    handler: function () {
                                        NProgress.set(0.0);  
                                        self.xhr.abort();
                                        self.store.setFileName('');
                                        self.clearInfo();
                                        self.fireEvent(FileUpload.EVENT_CLEAR_FILE);

                                    },
                                },
                                rgap: 10,
                            }]
                        }, {
                            type: BI.VerticalLayout.xtype,
                            cls: processName,
                            width: 300,
                            height: 1,
                        }]

                    }, {
                        el :{
                            type: BI.VerticalLayout.xtype,
                            cls: "bi-error",
                            ref: (_ref: any) => {
                                this.errorInfo = _ref;
                            },
                            invisible: true,
                            items : [{
                                type: BI.Label.xtype,
                                height: 20,
                                textAlign: "left",
                                ref: (_ref: Label) => {
                                    this.errorCode = _ref;
                                },
                            },{
                                type: BI.Label.xtype,
                                height: 20,
                                textAlign: "left",
                                ref: (_ref: Label) => {
                                    this.errorMsg = _ref;
                                },
                            },                        {
                                type: BI.VerticalAdaptLayout.xtype,
                                rgap: 5,
                                items: [
                                    {
                                        type: BI.Label.xtype,
                                        text: BI.i18nText('Dec-Dcm_Connection_File_Upload_ErrorTip1'),
                                    },{
                                        type: BI.TextButton.xtype,
                                        cls: "bi-high-light bi-high-light-border-bottom",
                                        text: BI.i18nText('Dec-Dcm_Connection_File_Upload_ErrorTip2'),
                                        handler: function () {
                                            window.open(Dec.system[DecCst.Hyperlink.DECISION_HYPERLINK_CONFIG][DecCst.Hyperlink.KERBEROS_CONF_HELP]);
                                        },
                                    },{
                                        type: BI.Label.xtype,
                                        text: BI.i18nText('Dec-Dcm_Connection_File_Upload_ErrorTip3'),
                                    }
                                ],
                            },],
                        },
                        vgap: 4,
                        lgap: 8,
                    }
                ],
            }, {
                type: BI.MultifileEditor.xtype,
                ref: (ref:any) => {
                    self.uploader = ref;
                },
                url: this.model.uploadUrl,
                accept: this.options.accept,
                listeners: [
                    {
                        // 选择文件
                        eventName: BI.MultifileEditor.EVENT_CHANGE,
                        action: function (files) {
                            self.options.attachId = '';
                            const fileInfo = files.files[0];
                            self.setInfo(fileInfo);
                            self.store.setFileName(fileInfo.fileName);
                            this.upload();
                            NProgress.configure({ parent: processClass, minimum: 0.0 });
                        },
                    },
                    {
                        // 上传进度刷新
                        eventName: BI.MultifileEditor.EVENT_PROGRESS,
                        action: function (progress) {
                            let rate = progress.loaded/progress.total;
                            NProgress.set(rate);
                        },
                    },
                    {
                        // 开始上传文件
                        eventName: BI.MultifileEditor.EVENT_UPLOADSTART,
                        action: function (progressEvent, xhr) {
                            self.xhr = xhr;
                        },
                    },
                    {
                        // 上传文件完毕
                        eventName: BI.MultifileEditor.EVENT_UPLOADED,
                        action: function () {
                            const uploadedInfo = this.getValue();
                            const failed = BI.some(uploadedInfo, function (index, file) {
                                if (file.data.errorCode) {
                                    BI.Msg.toast(uploadedInfo[0].filename + BI.i18nText('Dec-Dcm_Connection_File_Upload_Error'), {
                                        level: "error",
                                    });
                                    self.setErrorInfo(file.data)
                                    return true;
                                }
                            });
                            const key = self.options.processId +'Path';
                            !failed && self.setValue(uploadedInfo[0].data.kerberosInfo[key]);
                            !failed && self.fireEvent(FileUpload.EVENT_CHECK_SUCCESS, uploadedInfo[0].data);
                            !failed && BI.Msg.toast(uploadedInfo[0].filename + BI.i18nText('Dec-Dcm_Connection_File_Upload_Success'),{
                                level: "success"
                            });
                            NProgress.configure({ parent: 'body'});

                        },
                    },
                ],
            }]

        };
    }

    public getValue(): string {
        return this.options.value;
    }

    public setValue(value: string) {
        this.options.value = value;
        this.textEditor.text.setTitle(value);
        this.textEditor.setValue(value);
    }

    public setInfo(info: any) {
        this.uploadButton.setEnable(false);
        this.fileInfo.setVisible(true);
        this.textEditor.setValue(info.fileName);
        this.fileName.setText(info.fileName);
        this.fileSize.setText(Dec.Utils.getByteWidthUnit(info.size));
        this.fileModified.setText(BI.getDate().print("%Y-%X-%d %H:%M:%S"))
    }

    public clearInfo() {
        this.uploadButton.setEnable(true);
        this.fileInfo.setVisible(false);
        this.errorInfo.setVisible(false);
        this.textEditor.setValue('');
        this.options.attachId = '';
    }

    public setErrorInfo(errorInfo: any) {
        this.errorInfo.setVisible(true);
        this.errorCode.setText(BI.i18nText("Dec-Dcm_Connection_File_Upload_ErrorCode") + ":"+ errorInfo.errorCode);
        this.errorMsg.setText(BI.i18nText("Dec-Dcm_Connection_File_Upload_ErrorMsg") + ":" + errorInfo.errorMessage);
    }

    public setEnable(v) {
        this.uploadButton._setEnable(v);
    }

    public setFileInfo(params) {
        this.store.setFileInfo(params);
    }
}