PC-application/component/common/org-dropdown-list.js

(function() {
    $.jgrid.defaults.styleUI="Bootstrap";
    Vue.component('org-dropdown-list', {
        template: '<div class="mt10">\
	        			<form id="searchbar" onsubmit="return false;" >\
							<div class="clearfix" >\
								<div class="dataCell form-group">\
									<label for="orgCode" class="cellTitle">机构编号：</label>\
									<input v-model="orgCode" id="orgCode" name="orgCode" class="form-control inline w150 ml5" type="text" placeholder="">\
								</div>\
								<div class="dataCell form-group">\
									<label for="orgName" class="cellTitle">机构名称：</label>\
									<input v-model="orgName" id="orgName" name="orgName" class="form-control inline w150 ml5" type="text" placeholder="">\
								</div>\
								<div class="form-group ">\
									<button  @click="search" class="btn btn-primary w50 ml10" type="submit">搜索</button>\
									<button  @click="confirm" class="btn btn-success w50 ml10" type="submit">确定</button>\
									<!--<button @click="reset" class="btn btn-white w50 ml10" type="submit">重置</button> -->\
								</div>\
							</div>\
					   </form>\
                        <div ref="container" style="overflow-x: hidden">\
                            <div class="jqGrid_wrapper">\
                                <table id="table_list"></table>\
                            </div>\
                        </div>\
                        <div id="pager_list">\
                        </div>\
                    </div>',
        props: [],
        data: function() {
            return {
                orgName: "",
                orgCode: ""
            }
        },
        mounted: function() {
            initTable()
            initContainer(this)
            initEventOnBus()
            this.search()
        },
        methods: {
        	goBack: function() {
        		var layerid = parent.layer.getFrameIndex(window.name)
				parent.layer.close(layerid)
        	},
			search: function() {
				var vm = this
				$("#table_list").jqGrid('setGridParam',{datatype:'json', page: 1, postData: {
					agency_code: vm.orgCode,
					shanhu_name: vm.orgName
				}}).trigger('reloadGrid');
			},
			confirm: function() {
				var rowId = $("#table_list").jqGrid('getGridParam','selrow')
				var rowData = $("#table_list").jqGrid('getRowData',rowId);
				top.GlobalEventBus.$emit("org-dropdown-list:selected", rowData)
				this.goBack()
			},
			reset: function() {
				vm.orgName = ""
				vm.orgCode = ""
				this.search()
			}
        }
    })
    
    function resetWidth(vm) {
        var $searchbar = $("#searchbar")
        $("#table_list").setGridWidth($(window).width());
		$("#table_list").jqGrid("setGridHeight", $(window).height() - $searchbar.height() - 153)
	}
    
    function initContainer(vm) {
        resetWidth(vm)
        window.onresize = function() {
            resetWidth(vm)
        }
    }
    
    function initEventOnBus() {
		EventBus.$on('org-dropdown-list-search', function (arg) {
			$("#table_list").jqGrid('setGridParam',{datatype:'json', page: 1, postData: arg}).trigger('reloadGrid');
		})
	}
    
    function initTable() {
        $("#table_list").jqGrid({
			url: httpRequest.server+"/w0/Hlpay/Web/getShanhuList.html",
            datatype:"json",
            mtype: 'POST',
            ajaxGridOptions: {
            	beforeSend: function(request, grid) {
		        	var userAgent = window.localStorage.getItem(httpRequest.agentName);
		        	request.setRequestHeader(httpRequest.agentName, userAgent);
		        }
            },
            postData: {	
            },
            prmNames: {
            	page: "pageno",
            	rows: "rowcount"
            },
            rowNum: 10,
            jsonReader: {
            	root: "data",
            	page: "pageno",
            	records: "total",
            	total: "totalpages"
            },
            height:400,
            autowidth:true,
            shrinkToFit:true,
            rowNum:10,
            rowList:[10,20,30],
            colNames:["机构编号","机构名称"],
            colModel:[
            {name:"code",index:"code",width:150},
            {name:"name",index:"name",width:150}
            ],
            pager:"#pager_list",
            pagerpos: "left",
            viewrecords:true,
            hidegrid:false})
    }

    
})()