saas-platform/frontend/saas-web/app/view/sys/config/FormPanel.js

Ext.define('saas.view.sys.config.FormPanel', {
    extend: 'Ext.form.Panel',
    xtype: 'sys-config-formpanel',

    controller: 'sys-config-formpanel',
    viewModel: 'sys-config-formpanel',
    
    //字段属性
    _idField: 'id',
    _readUrl:'/api/account/company/read/current',
    _saveUrl:'/api/account/company/save',

    requires: [
        'Ext.form.field.File'
    ],

    //基础属性
    frame:true,
    initId: 0,
    layout: 'vbox',
    autoScroll: true,
    border: 1,
    bodyPadding: 5,

    fieldDefaults: {
        margin: '0 5 5 30',
        labelAlign: 'right',
        labelWidth: 90,
        width:300,
        blankText: '该字段不能为空'
    },

    bbar:{
        frame:true,
        items:['->',{
            text:'保存',
            formBind:true,
            name:'save'
        },'->']
    },

    items: [{
        bind:'{id}',
        xtype: 'hidden',
        name: 'id',
        fieldLabel: 'id',
        allowBlank: true,
        width:600
    },{
        bind:'{name}',
        xtype: 'textfield',
        name: 'name',
        fieldLabel: '公司名称',
        allowBlank: true,
        editable:false,
        readOnly:true,
        width:600
    },{
        bind:'{address}',
        xtype: 'textfield',
        name: 'address',
        fieldLabel: '公司地址',
        beforeLabelTextTpl : "<font color=\"red\" style=\"position:relative; top:2px;right:2px; font-weight: bolder;\">*</font>",
        allowBlank: false,
        width:600
    },{
        bind:'{tel}',
        xtype: 'textfield',
        name: 'tel',
        fieldLabel: '电话',
        beforeLabelTextTpl : "<font color=\"red\" style=\"position:relative; top:2px;right:2px; font-weight: bolder;\">*</font>",
        allowBlank: false,
        width:500
    },{
        bind:'{fax}',
        xtype: 'textfield',
        name: 'fax',
        fieldLabel: '传真',
        allowBlank: true,
        width:500
    }
    // ,{
    //     bind:'{en_begindate}',
    //     xtype : "datefield", 
    //     name : "en_begindate",
    //     format:'Y-m-d H:i:s', 
    //     fieldLabel : "开账日期", 
    //     allowBlank : true, 
    //     editable:false,
    //     hideTrigger:true,
    //     readOnly:true,
    //     width:500
    // }
    // ,{ 
    //     bind:'{en_pricemethod}',
    //     displayField : "display", 
    //     editable:false,
    //     hideTrigger : false, 
    //     maxLength : 100.0, 
    //     width:500,
    //     minValue : null, 
    //     queryMode : "local", 
    //     valueField : "value", 
    //     xtype : "combo",
    //     value:'WACC',
    //     store:{
    //         fields: ['display', 'value'],
    //         data : [
    //             {"display":"加权平均法", "value":'WACC'},
    //             {"display":"先进先出法", "value":'FIFO'}
    //         ]
    //     },
    //     name : "en_pricemethod", 
    //     beforeLabelTextTpl : "<font color=\"red\" style=\"position:relative; top:2px;right:2px; font-weight: bolder;\">*</font>",
    //     fieldLabel : "库存计算方式", 
    //     allowBlank : false, 
    // }
    // ,{  
    //     ignore:true,
    //     bind:'{updateTime}',
    //     xtype : "datefield", 
    //     name : "updateTime", 
    //     fieldLabel : "更新时间", 
    //     allowBlank : true, 
    //     hideTrigger:true,
    //     format:'Y-m-d H:i:s',
    //     editable:false,
    //     readOnly:true,
    //     width:500,
    // }
    ,{
        xtype: 'form',
		width:600,
		frame: false,
		border: false,
		minHeight: 22,
		bodyStyle: 'padding:2px;',
        layout: 'vbox',
        items:[{
            bind:'{signet}',
            name : "signet", 
            allowBlank : true, 
            hidden:true,
            xtype:'textfield'
        },{
            allowBlank : true, 
            width:150,
            buttonOnly:true,
            fieldLabel:'打印章上传',
            xtype: 'filefield',
            name:'signetFilefield',
            buttonText: '选择图片',
            createFileInput : function() {
                    var me = this;
                    me.fileInputEl = me.button.el.createChild({
                    name: me.getName(),
                    cls: Ext.baseCSSPrefix + 'form-file-input',
                    tag: 'input',
                    type: 'file',
                    size: 1,
                    accept:"image/*"
                }).on('change', me.onFileChange, me);
            },
            listeners: {
                afterrender:function(field,ops){
                    var fileEl = field.fileInputEl.dom;
                    fileEl.setAttribute("accept","image/*");
                },
                change: function(field){
                    var form = field.ownerCt.ownerCt;
                    var myForm = field.ownerCt;
                    var fileEl = field.fileInputEl.dom;
                    var fd = new FormData();
                    fd.append('file', fileEl.files[0]);
                    form.setLoading(true);
                    Ext.Ajax.request({
                        url: '/api/file/upload',//这里是填写需要跨域访问的URL
                        cors: true,
                        useDefaultXhrHeader: false,
                        method: 'post',
                        rawData: fd,
                        headers: {
                            'Access-Control-Allow-Origin': '*',
                            'Authorization':  saas.util.State.get('session').token,
                            //"Content-Type": 'multipart/form-data'  //文件上传的格式， 
                            "Content-Type":null
                        },
                        success: function (response, opts) {
                            form.setLoading(false);
                            saas.util.BaseUtil.showToast('上传成功');
                            var res = Ext.decode(response.responseText);
                            if(res.success){
                                var data = res.data;
                                var name = data.name + "  (" + Ext.util.Format.fileSize(data.size) + ")";
                                myForm.down('[name=signet]').setValue(data.fullPath);
                                field.setRawValue(name);
                                //读取图片
                                if(data.id){
                                    var serverOptions = Ext.manifest.server;
                                    var img = myForm.down('[name=SignetPhoto]');
                                    img.el.dom.src = serverOptions.basePath + '/api/file/download?path='+data.fullPath;
                                    var showSignetPhoto = form.down('[name=showSignetPhoto]');
                                    showSignetPhoto.show();
                                }
                            }else{
                                saas.util.BaseUtil.showToast('上传失败: ' + res.message);
                            }
                        },
                        failure: function (response, opts) {
                            form.setLoading(false);
                            var res = Ext.decode(response.responseText);
                            saas.util.BaseUtil.showToast('上传失败: ' + res.message);
                        }
                    });
                }
            }
        },{
            xtype:'displayfield',
            margin:'0 0 0 150',
            value:'支持 JPG、JPEG、PNG、BMP 格式 , 图片小于10M ',  
        },{
            xtype: 'image',
            width: 100,
            height: 100,
            margin:'0 0 5 150',
            src:'resources/images/default/basePhoto.png',
            name:'SignetPhoto',
        },{
            margin:'0 0 5 151',
            xtype:'container',
            name:'showSignetPhoto',
            cls:'x-container-group',
            hidden:true,
            items:[{
                width: 45,
                height: 24,
                xtype:'button',
                text:'查看',
                handler:function(b){
                    var form = b.ownerCt.ownerCt.ownerCt;
                    var img = form.down('[name=SignetPhoto]');
                    form.lookPic(img);
                }
            },{
                margin:'0 0 0 10',
                width: 45,
                height: 24,
                xtype:'button',
                text:'下载',
                handler:function(b){
                    var form = b.ownerCt.ownerCt.ownerCt;
                    var path = form.down('[name=signet]').value;
                    form.downLoad(path);
                }
            }]
        }]
    },{
        xtype: 'form',
		width:600,
		frame: false,
		border: false,
		minHeight: 22,
		bodyStyle: 'padding:2px;',
        layout: 'vbox',
        items:[{
            bind:'{logoUrl}',
            name : "logoUrl", 
            allowBlank : true, 
            hidden:true,
            xtype:'textfield'
        },{
            allowBlank : true, 
            width:150,
            buttonOnly:true,
            fieldLabel:'Logo上传',
            name:'logoFilefield',
            xtype: 'filefield',
            buttonText: '选择图片',
            createFileInput : function() {
                    var me = this;
                    me.fileInputEl = me.button.el.createChild({
                    name: me.getName(),
                    cls: Ext.baseCSSPrefix + 'form-file-input',
                    tag: 'input',
                    type: 'file',
                    size: 1,
                    accept:"image/*"
                }).on('change', me.onFileChange, me);
            },
            listeners: {
                afterrender:function(field,ops){
                    var fileEl = field.fileInputEl.dom;
                    fileEl.setAttribute("accept","image/*");
                },
                change: function(field){
                    var form = field.ownerCt.ownerCt;
                    var myForm = field.ownerCt;
                    var fileEl = field.fileInputEl.dom;
                    var fd = new FormData();
                    fd.append('file', fileEl.files[0]);
                    form.setLoading(true);
                    Ext.Ajax.request({
                        url: '/api/file/upload',//这里是填写需要跨域访问的URL
                        cors: true,
                        useDefaultXhrHeader: false,
                        method: 'post',
                        rawData: fd,
                        headers: {
                            'Access-Control-Allow-Origin': '*',
                            'Authorization':  saas.util.State.get('session').token,
                            //"Content-Type": 'multipart/form-data'  //文件上传的格式， 
                            "Content-Type":null
                        },
                        success: function (response, opts) {
                            form.setLoading(false);
                            saas.util.BaseUtil.showToast('上传成功');
                            var res = Ext.decode(response.responseText);
                            if(res.success){
                                var data = res.data;
                                var name = data.name + "  (" + Ext.util.Format.fileSize(data.size) + ")";
                                myForm.down('[name=logoUrl]').setValue(data.fullPath);
                                //读取图片
                                if(data.id){
                                    var serverOptions = Ext.manifest.server;
                                    var img = myForm.down('[name=LogoPhoto]');
                                    img.el.dom.src = serverOptions.basePath + '/api/file/download?path='+data.fullPath;
                                    var showLogoPhoto = form.down('[name=showLogoPhoto]');
                                    showLogoPhoto.show();
                                }
                            }else{
                                saas.util.BaseUtil.showToast('上传失败: ' + res.message);
                            }
                        },
                        failure: function (response, opts) {
                            form.setLoading(false);
                            var res = Ext.decode(response.responseText);
                            saas.util.BaseUtil.showToast('上传失败: ' + res.message);
                        }
                    });
                }
            }
        },{
            xtype:'displayfield',
            margin:'0 0 0 150',
            value:'支持 JPG、JPEG、PNG、BMP 格式 , 图片小于10M ',  
        },{
            xtype: 'image',
            style:'border:1px solid #f7f7f7;',
            width: 100,
            height: 100,
            margin:'0 0 5 150',
            src:'resources/images/default/basePhoto.png',
            name:'LogoPhoto',
        },{
            name:'showLogoPhoto',
            margin:'0 0 5 151',
            xtype:'container',
            cls:'x-container-group',
            hidden:true,
            items:[{
                width: 45,
                height: 24,
                xtype:'button',
                text:'查看',
                handler:function(b){
                    var form = b.ownerCt.ownerCt.ownerCt;
                    var img = form.down('[name=LogoPhoto]');
                    form.lookPic(img);
                }
            },{
                margin:'0 0 0 10',
                width: 45,
                height: 24,
                xtype:'button',
                text:'下载',
                handler:function(b){
                    var form = b.ownerCt.ownerCt.ownerCt;
                    var path = form.down('[name=logoUrl]').value;
                    form.downLoad(path);
                }
            }]
        }]
    }],

    initComponent: function () {
        var me = this,
        viewModel = me.getViewModel();
        var url = me._readUrl;
        saas.util.BaseUtil.request({url })
        .then(function(res) {
            if(res.success) {
                var d = res.data;
                viewModel.setData(d);
                viewModel.notify();
                me.load(me);
            }
        })
        .catch(function(response) {
            console.error(response);
        });

        me.callParent(arguments);
    },

    refresh:function(){
        this.ownerCt.setTitle('参数设置')
    },

    load:function(form){
        var serverOptions = Ext.manifest.server;
        //打印章
        var signet = form.down('[name=signet]').value;
        if(signet&&signet!=''){
            var img = form.down('[name=SignetPhoto]');
            img.el.dom.src = serverOptions.basePath + '/api/file/download?path='+signet;
            var showSignetPhoto = form.down('[name=showSignetPhoto]');
            showSignetPhoto.show();
        }
        //Logo
        var logoUrl = form.down('[name=logoUrl]').value;
        if(logoUrl&&logoUrl!=''){
            var img = form.down('[name=LogoPhoto]');
            img.el.dom.src = serverOptions.basePath + '/api/file/download?path='+logoUrl;
            var showLogoPhoto = form.down('[name=showLogoPhoto]');
            showLogoPhoto.show();
        }
        //文件名称
        // var viewModel = form.getViewModel();
        // if(viewModel.data.fileInfoList&&viewModel.data.fileInfoList.length!=0){
        //     var logo = viewModel.data.fileInfoList[0].logo;
        //     var logoName = logo.name + "  (" + Ext.util.Format.fileSize(logo.size) + ")";
        //     var signet = viewModel.data.fileInfoList[0].signet;
        //     var signetName = signet.name + "  (" + Ext.util.Format.fileSize(signet.size) + ")";
        // }
    },

    lookPic:function(img){
        var me = this, resizer = me.resizer,
        imageframe = document.getElementById('ext-image-frame');
        var src = img.el.dom.src;
        if (!imageframe) {
            var el = Ext.DomHelper.append(document.body, '<img id="ext-image-frame" src="' + src +
                    '" width="500" height="400" style="position:absolute;left:0;top:0px;"/>', true);
            imageframe = el.dom;
        } else {
            imageframe.src = src;
        }
        if (!resizer) {
            resizer = this.resizer = Ext.create('Ext.resizer.Resizer', {
                target: 'ext-image-frame',
                pinned: true,
                width: 410,
                height: 310,
                minWidth: 100,
                minHeight: 80,
                preserveRatio: true,
                handles: 'all',
                dynamic: true,
                constrainTo:me.getEl()
            });
            var resizerEl = resizer.getEl();
            resizerEl.on('dblclick', function(){
                resizerEl.hide(true);
            });
        }
        resizer.getEl().center();
        resizer.getEl().show(true);
        Ext.DomHelper.applyStyles(imageframe, 'position:absolute;z-index:100;');
    },

    downLoad:function(path){
        var serverOptions = Ext.manifest.server;
        window.location.href = serverOptions.basePath + '/api/file/download?path='+path;
        //ajax 响应下载必须要创建一个form实例
        // if (!Ext.fly('ext-attach-download')) {  
		// 	var frm = document.createElement('form');  
		// 	frm.id = 'ext-attach-download';  
		// 	frm.name = id;  
		// 	frm.className = 'x-hidden';
		// 	document.body.appendChild(frm);
        // }
		// Ext.Ajax.request({
		// 	url: 'http://192.168.253.31:8560/api/file/download?path='+path,  
		// 	method: 'post',
		// 	form: Ext.fly('ext-attach-download'),
		// 	isUpload: true,
		// 	params: ''
		// });
    }
});