PC-application/component/rehabilitation/guidance-template-panel.js

Vue.component('guidance-template-panel', {
    template: '<div class="ml20 mr20"">\
					<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.title}}</span>\
							</div>\
						</div>\
					</div>\
					<div>\
					</div>\
				</div>',
    props: ["activetemplate"],
    data: function() {
        return {
        	pagesize: 20,
        	pageNo: 1,
			items: [],
			downListValue: '',
			searchKey:'',
			guideId: ''
        }
    },
    created: function() {
    	var vm = this
    },
    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.selectGuidances()
		    }
		};
    },
    methods: {
    	debounceTempList: _.debounce(function(value, searchKey) {
			var vm = this
    		vm.pageNo = 1
			vm.items = []
			vm.downListValue = value
			vm.searchKey = searchKey
    		this.selectGuidances()
		}, 500, false),
		selectGuidances: function(){
			var vm=this;
			var params={
				type: vm.downListValue,
				id: '',
				title: this.searchKey,
				page: this.pageNo,
				pagesize: this.pagesize
			}
			rehaAPI.selectGuidances(params).then(function(res){
				if(res.status==200){
					if(res.data && res.data.length) {
						vm.pageNo++;
						vm.items = vm.items.concat(res.data)
						if(vm.items.length>0){
							var first = vm.items[0]
							EventBus.$emit('active-template', first)
						}	
					}
				} else {
					layer.msg(res.msg,{icon:5}); 
				}
			})
		},
        showDetail: function(o) {
        	var vm = this
        	EventBus.$emit('active-template', o)
        }
    }
})