PC-application/component/guidance/system-panel.js

Vue.component('system-panel', {
    template: '<div class="ml20 mr20"">\
					<div class="search-warp">\
						<input class="inp-search" placeholder="查找模板" v-model="filter" @input="debounceTempList" />\
					</div>\
					<div ref="innerPanel" style="overflow-y: auto;">\
						<div class="list-arrow-r temp-item" v-for="(o, i) in items">\
							<div @click="showDetail(o)" :class="{\'active\': o == activetemplate}"  class="item-header c-nowrap">\
								<span class="c-nowrap">{{o.modelName}}</span>\
							</div>\
						</div>\
					</div>\
					<div>\
					</div>\
				</div>',
    props: ['activetemplate'],
    data: function() {
        return {
        	filter: "",
        	pagesize: 20,
        	pageNo: 1,
        	throttled: null,
        	items: []
        }
    },
    created: function() {

    },
    mounted: function() {
    	var vm = this
    	var el = vm.$refs.innerPanel
    	$(el).height($(window).height() - 140)
    	window.addEventListener('resize', _.debounce(function() {
    		$(el).height($(window).height() - 140)
    	}, 300))
    	
    	el.onscroll = function() {
		    var scrollHeight = el.scrollHeight;
		    var scrollTop = el.scrollTop;
		    var clientHeight = el.clientHeight;
		
		    if (scrollHeight - clientHeight == scrollTop) {
		        vm.guidanceTempList()
		    }
		};
		
		vm.guidanceTempList()
    },
    methods: {
    	debounceTempList: _.debounce(function() {
			var vm = this
    		vm.pageNo = 1
    		vm.items = []
    		this.guidanceTempList()
		}, 500, false),
        guidanceTempList: function() {
        	var vm = this
        	guidanceAPI.guidanceTempList( {
	            type: 1, //模板类型 1:系统 2:自定义 为空:所有
	            pageNo: vm.pageNo,
	            pageSize: vm.pagesize,
	            filter: vm.filter
	        }).then(function(res) {
	        	if(res.data && res.data.length) {
	        		vm.pageNo++;
	        		vm.items = vm.items.concat(res.data)
	        	}
	        })
        },
        showDetail: function(o) {
        	var vm = this
        	EventBus.$emit('active-template', o)
        	var query = {
        		modelCode: o.code,
        		patient: storage.patient||"",
        		timestemp: $.now()
        	}
        	vm.$router.push({path:'/system-send-panel',query:query})
        }
    }
})