DS7/DSWeb/Areas/MvcShipping/Viewsjs/MsInfoClient/ImgIndex.js

//押箱管理
Ext.namespace('Shipping');

Shipping.ImgIndex = function (config) {
    Ext.applyIf(this, config);
    this.initUIComponents();
    window.Shipping.ImgIndex.superclass.constructor.call(this);
};

Ext.extend(Shipping.ImgIndex, Ext.Panel, {
    PageSize: 50,
    OprationStatus: null, //仅当弹出界面时使用
    SelectedRecord: null,
    GID: '',

    initUIComponents: function () {
        this.formname = "InfoClient_ImgIndex";

        this.PicUploadType = "InfoClient_Img";

        var mainform = window.parent._this;

        this.EditRecord = mainform.Editdata;

        this.GID = this.EditRecord.GID;

        _this = this;
        this.inedit = false;

        this.URLINFO = "";
        this.UrlType = "";
        /////////////////////////////////////////
        //#region 主列表
        this.storeList = Ext.create('Ext.data.Store', {
            pageSize: this.PageSize,
            model: 'MsInfoClientImgmb',
            remoteSort: false,
            //groupField: 'GroupDate',
            proxy: {
                type: 'ajax',
                //url: '/TruckMng/MsRptPcHeadOperate/QryData_ADL',
                url: '/MvcShipping/MsInfoClient/GetImgList',
                //this.storeList.proxy.url = '/TruckMng/MsRptPcHeadOperate/QryData_ADL';
                reader: {
                    id: 'GID',
                    root: 'data',
                    totalProperty: 'totalCount'
                }
            }
        });

        
        this.column = [
            {
                sortable: true, hidden: true,
                dataIndex: 'GID',
                header: 'GID',
                width: 80
            },
            {
                sortable: true, hidden: true,
                dataIndex: 'LINKGID',
                header: 'LINKGID',
                width: 80
            },
            {
                sortable: true, hidden: true,
                dataIndex: 'CREATEUSER',
                header: 'CREATEUSER',
                width: 80
            },
            {
                sortable: true,
                dataIndex: 'NAME',
                header: '名称',
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true
                },
                width: 80
            },
            {
                sortable: true,
                dataIndex: 'DESCRIPTION',
                header: '说明',
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true
                },
                width: 160
            },
            {
                sortable: true,
                dataIndex: 'IMGURL',
                header: '图片文件',
                width: 60,
                renderer: function (value, p, record) {
                    if (value == '') {
                        //return '<input type="button" value="上传" onClick="javascript:this.UpLoadFile('+record.data.BillNo+')"'; 
                        return '';
                    } else
                        return '<a href="' + value + '" style=' + '"text-decoration:none" target="_blank"' + ' > 下载 </a>';
                }
            }, {
                xtype: 'actioncolumn',
                width: 50,
                text: "图片预览",
                items: [{
                    icon: '/images/icons/btnSearch.gif',  // Use a URL in the icon config
                    tooltip: '图片预览',
                    handler: function (grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        var filePath = rec.get('IMGURL');
                        if (filePath == "" || filePath == null) return;
                        if (/.(gif|jpg|jpeg|png|ico)$/.test(filePath)) {
                            ImgWindow(filePath);

                        } else if (/.(pdf|txt)$/.test(filePath)) {
                            ImgWindow(filePath, "_blank");

                        } else {
                            var a = document.createElement("a");
                            // 利用URL.createObjectURL()方法为a元素生成blob URL
                            a.href = filePath;
                            a.target = "_blank";
                            // 设置文件名，目前只有Chrome和FireFox支持此属性
                            try {
                                a.download = filePath;
                            } catch (e) {
                                alert("浏览器不兼容！");
                            } finally {
                                a.click();
                            }
                        }

                    }
                }]
            },
            {
                sortable: true,//数据库内图片
                dataIndex: 'IMG', hidden: true,
                header: 'IMG',
                width: 80
            },
            {
                sortable: true,
                dataIndex: 'INDATABASE',
                header: '是否存至数据库',
                align:'center',
                editor: {
                    xtype: 'checkbox'
                },
                renderer: function (value, meta, record) {
                    if (value == "True" || value == 1 || value == "true" )
                        return '√';
                    else
                        return '';
                },
                width: 94
            },
            {
                sortable: true,
                dataIndex: 'REMARK',
                header: '备注',
                editor: {
                    xtype: 'textfield',
                    selectOnFocus: true
                },
                width: 80
            },
            {
                text: '上传图片',
                xtype: 'gridcolumn',
                width: 60,
                align: 'center',
                renderer: function (value, metaData, record) {
                    var id = record.data.GID;
                    var INDATABASE = record.data.INDATABASE;
                    btn = Ext.getCmp(id);

                    parentid = record.data.LINKGID;
                    if (_this.inedit == false) {
                        //该判断为了防止改写该行数据时重复产生按钮
                        Ext.defer(function () {
                            id = record.data.GID;
                            metaData.tdAttr = 'data-qtip="上传图片文件"';
                            Ext.widget('button', {
                                renderTo: id,
                                id: id,
                                height: 17,
                                width: 50,
                                // style:"margin-left:5px;background:blue;",
                                text: '上传',
                                handler: function () {
                                    //相应事件方法


                                    if (parentid == "") {
                                        Ext.Msg.show({ title: '提示', msg: '请先保存新增的记录，然后才可以上传相应图片!', icon: Ext.Msg.INFO, buttons: Ext.Msg.OK });
                                        return;
                                    }

                                    _this.URLINFO = { KeyValue: id, INDATABASE: INDATABASE };
                                    //_this.URLINFO = { KeyValue: id, UrlValue:"23A792D2-E61F-7930-0A5F-9F6D56F2D9F0.gif" };

                                    _this.UrlType = _this.PicUploadType;

                                    //_this.onUpLoadFileClick(URLINFO, UrlType);
                                    _this.currBody = record;

                                    UpLoadFile(_this.URLINFO, _this.UrlType, _this.BodyRewrite, _this);
                                    //ReWriteIntoDatabase(_this.URLINFO, _this.UrlType);
                                }
                            });
                        }, 50);
                        return Ext.String.format('<div id="{0}"></div>', id);
                    } else {
                        return Ext.String.format('<div id="{0}"></div>', id);
                    }

                }
            }
        ];

        this.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });

        Ext.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
            width: 40
        });

        this.GridCheckBoxModel = Ext.create('Ext.selection.CheckboxModel');

        this.gridList = new Ext.grid.GridPanel({
            store: this.storeList,
            enableHdMenu: false,
            region: 'center',
            loadMask: { msg: "数据加载中，请稍等..." },
            trackMouseOver: true,
            disableSelection: false,
            selModel: this.GridCheckBoxModel,

            //selModel: this.MainCB,
            columns: this.column,
            plugins: [
                this.cellEditing
            ],
            /*features: [{
            id: 'group',
            ftype: 'grouping',
            groupHeaderTpl: '{name}',
            hideGroupedHeader: true,
            enableGroupingMenu: true
            }],*/
            viewConfig: {
                enableTextSelection: true, //允许复制数据
                autoFill: true,
                getRowClass: function (record, rowIndex, rowParams, store) {
                    //var YXSTATE = record.get('YXSTATE');
                    //return Shipping.GetAuditClass(BLSTATUS);
                }
            },
            bbar: Ext.create('Ext.PagingToolbar', {
                store: this.storeList,
                displayInfo: true,
                displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
                emptyMsg: "没有数据"
            })
        });

        /////////////以下部分为获取存储的gridpanel显示样式
        this.column = DsTruck.GetGridPanel(USERID, this.formname, this.column);
        //使用者id，表名 ，中间column数组
        this.column.unshift(new Ext.grid.RowNumberer());
        this.gridList.reconfigure(this.storeList, this.column);
        ////////////////////////////

        //#endregion

        this.panelBtn = new Ext.Panel({
            region: "north",
            tbar: [
                {
                    text: "添加", id: "btnadd", 
                    iconCls: "btnadd",
                    handler: function (button, event) {
                        this.onAddClick(button, event);
                    },
                    scope: this
                }, {
                    text: "删除", id: "btndelete",
                    iconCls: "btndelete",
                    handler: function (button, event) {
                        this.onDeleteClick(button, event);
                    },
                    scope: this
                }, '-', {
                    text: "保存", iconCls: "btnsave", id: "btnsave",
                    handler: function (button, event) {
                        //this.PushState("3000");
                        this.onSaveClick();
                    },
                    scope: this
                },  
                {
                    text: "保存列表样式",
                    id: "btntest",
                    handler: function (button, event) {
                        var formname = this.formname;
                        var tempcolumns = this.gridList.columns;
                        DsTruck.SaveGridPanel(USERID, formname, tempcolumns, this.column, 0, false);
                    },
                    scope: this
                }
                //,this.CB_EditMode
            ]
        });

        //#region 布局
        this.panelTop = new Ext.Panel({
            layout: "border",
            region: "north",
            height: 28,
            items: [ this.panelBtn]
        });

        this.panelMain = new Ext.Panel({
            //title: '',
            layout: "border",
            region: 'center',
            height: 600,
            margin: '1 2',
            split: true,
            items: [this.gridList]
        });

        Ext.apply(this, {
            items: [this.panelTop, this.panelMain]
        });
        //#endregion

        //#region 以下集中绑定事件


        this.storeList.on('beforeload', function (store) {
            var sql = this.getCondition();
            //Ext.apply(store.proxy.extraParams, { condition: sql });
        }, this);

        this.gridList.on('edit', function (editor, e, eOpts) {
            this.BodyAfterEdit(editor, e, eOpts);
        }, this);
        this.cellEditing.on('beforeedit', function (editor, e) {
            //Ext.getCmp("zongshu").setText("1234"); 
            return this.BodyBeforeEdit(editor, e);
        }, this);

        this.onRefreshClick();
        //#endregion

    }, //end initUIComponents

    onRefreshClick: function (button, event) {
        //if (!this.checkSearchCondition())
        //    return;

        var sql = this.getCondition();
        this.sqlcontext = sql;
        this.storeList.load({
            params: { start: 0, limit: this.PageSize, condition: sql },
            waitMsg: "正在查询数据...",
            scope: this
        });
        //}
    },

    getCondition: function ()
    {
        sql = " LINKGID='" + this.GID + "' ";
        return sql;
    },

    onDeleteClick: function (button, event) {
        var selections = this.gridList.getSelectionModel().getSelection();
        if (selections.length == 0) {
            Ext.Msg.show({ title: '提示', msg: '请先选择一条记录!', icon: Ext.Msg.INFO, buttons: Ext.Msg.OK });
            return;
        }

        var record = selections[0];
        Ext.MessageBox.confirm('提示', '确定删除该记录吗？', function (btn) {
            if (btn == 'yes') {
                Ext.Msg.wait('正在删除数据...');
                Ext.Ajax.request({
                    waitMsg: '正在删除数据...',
                    url: '/MvcShipping/MsInfoClient/DelImgList',
                    params: {
                        Img: Ext.JSON.encode(record.data)
                    },
                    callback: function (options, success, response) {
                        if (success) {
                            var jsonresult = Ext.JSON.decode(response.responseText);
                            if (jsonresult.Success) {
                                this.storeList.remove(record);
                                Ext.Msg.show({ title: '提示', msg: jsonresult.Message, icon: Ext.Msg.INFO, buttons: Ext.Msg.OK });
                            }
                            else {
                                Ext.Msg.show({ title: '错误', msg: jsonresult.Message, icon: Ext.Msg.ERROR, buttons: Ext.Msg.OK });
                            }
                        }
                    },
                    failure: function (response, options) {
                        Ext.Msg.show({ title: '警告', msg: '服务器响应出错,请重试', icon: Ext.Msg.INFO, buttons: Ext.Msg.OK });
                    },
                    success: function (response, options) {
                    },
                    scope: this
                });   //end Ext.Ajax.request
            }
        }, this);
    }, 

    onAddClick: function (button, event) {

        var store = null;

        store = this.storeList;

        var record = null;

        record = Ext.create('MsInfoClientImgmb', {
            GID: NewGuid(),
            LINKGID:"",
            NAME: "",
            DESCRIPTION: "",
            REMARK: "",
            IMGURL: "",
            IMG: "",
            INDATABASE: ""
        });

        store.add(record);

        cellediting = this.cellEditing;

        var n = store.getCount();
        cellediting.startEditByPosition({ row: n - 1, column: 2 });

    } 
    ,
    onSaveClick: function (button, event) {

        if (COMPANYID == "" || USERID == "") {
            alert("登录信息不全，请退出重新登录");
            return;
        }

        _this = this;
        
        var BodyDatas = [];
        for (var i = 0; i < _this.storeList.getCount(); i += 1) {
            var member = _this.storeList.getAt(i);

            BodyDatas.push(member);
        }

        if (_this.OpStatus == 'copynew')
            _this.OpStatus = 'add';

        var ImgList = ConvertRecordsToJson(BodyDatas);
        //var CargoNameDelBody = ConvertRecordsToJsonAll(_this.CargoNameDel);

        Ext.Msg.wait('正在保存数据, 请稍侯..');
        Ext.Ajax.request({
            waitMsg: '正在保存数据...',
            url: '/MvcShipping/MsInfoClient/SaveImgList',
            scope: this,
            async: false,
            params: {
                LINKGID: this.GID,
                ImgList: ImgList
            },
            callback: function (options, success, response) {
                if (success) {
                    Ext.MessageBox.hide();
                    var jsonresult = Ext.JSON.decode(response.responseText);
                    if (jsonresult.Success) {
                        //Ext.Msg.show({ title: '保存成功', msg: jsonresult.Message, icon: Ext.Msg.OK, buttons: Ext.Msg.OK });

                        _this.onRefreshClick();

                    } else {
                        Ext.Msg.show({ title: '错误', msg: jsonresult.Message, icon: Ext.Msg.ERROR, buttons: Ext.Msg.OK });
                    }
                } else {
                    Ext.Msg.show({
                        title: '请重试',
                        msg: '服务器响应出错',
                        icon: Ext.Msg.ERROR, buttons: Ext.Msg.OK
                    });
                }
                //alert('03');
            }
        });

    } 
    ,

    BodyBeforeEdit: function (editor, e) {

        this.inedit = true;


        return true;
    },

    BodyAfterEdit: function (editor, e, eOpts) {

        this.inedit = false;

    },

    BodyRewrite: function (newurl, _this) {
        if (typeof (newurl) == "undefined" || newurl == "") { return; }
        INDATABASE = "";
        var result = Ext.JSON.decode(newurl.response.responseText);
        newurlStr = result.data;
        _this.storeList.each(function (record) {
            if (record.get('GID') == _this.currBody.data.GID) {

                record.set('IMGURL', newurlStr);
                INDATABASE = record.get('INDATABASE');
            }
        });

    }
});