vue-apps/com.actionsoft.apps.kms.mobile/pages/knwlhome.vue

<template>
	<div class="knwlhome">
		<search v-model="keyword" :isFullsearchAppActive="isFullsearchAppActive" :filterSetting="filterSetting" @allSearch="allSearch" @searchfunc="searchMobileList"/>
		<div class="content">
			<div class="top" style="font-size: 11px;font-weight: bold;">
				{{newTitle}}
				<span class="icon-descending">
				  <van-icon name="descending" @click="showPopup"/>
				</span>
				<div class="dropdown-menu" v-if="show">
					<van-sidebar v-model="activeKey" @change="onChange">
						<van-sidebar-item v-for="(item,index) in dropDownList" :key="index" :title="item.text">
							<i class="awsui-iconfont" style="color:red;">&#xe639;</i>
						</van-sidebar-item>
					</van-sidebar>
				</div>
			</div>
			<van-loading v-show="initLoad" size="24" style="text-align: center;height: 300px;line-height: 300px;"/>
			<list ref="knwlist" :pageSetting="{'loading':loading,'finished':finished}" @downLoadMore="downLoadMore" :style="contentStyle" class="content-list" v-if="!initLoad&&!fullSearch" :list="lists" :type="type"></list>
			<list ref="fullknwlist" :pageSetting="{'loading':loading,'finished':finished}" @downLoadMore="allSearch" class="search-list" v-else-if="!initLoad" :searchval="keyword" :type="type" :list="resultList"></list>
		</div>
		<tabbar v-if="keyword===''"/>
	</div>
</template>

<script>
	import tabbar from '@/components/tabbar' //引用组件的地址
	import Search from '@/components/search'
	import List from '@/components/list'
	// import Radio from '@/components/radio'
	import awsuiAxios from "../awsuiAxios";

	export default {
		name: 'knwlhome',
		components: {
			tabbar,
			Search,
			List,
			// Radio
		},
		data() {
			return {
				initLoad:true,
				loading: false,
				finished: false,
				isLoadingData:false,
				offset:10,
				keyword: '',
				type: '-1',
				searchsize:0,
				show: false,
				newTitle: '最新发布',
				activeKey: 0,
				sortIndx:"publishTime",
				lists: [
				],
				resultList: [],
				dropDownList: [
					{text: '最新发布', value: "publishTime"},
					{text: '阅读次数', value: "readCount"},
					{text: '讨论次数', value: "commentCount"},
					{text: '标题', value: "cardName"}
				],
				isSearch: false,
				isLoading:false,
				isFullsearchAppActive:false,
				curPage:0,
				totalRecords:0,
				contentStyle:"",
				fullSearch:false,
				filterSetting:{
					cardName: "",
					publishTime: "",
					publishUser: "",
					departId: "",
					tags: encodeURIComponent(JSON.stringify([])),
					schemaMetaData:encodeURIComponent(JSON.stringify({
						'01': [],
						'2': []
					}))
				}
			}
		},
		methods: {
			downLoadMore(){
				this.searchListParams();
			},
			showPopup() {
				this.show = !this.show
			},
			onChange(index) {
				this.show = false
				this.newTitle = this.dropDownList[index].text;
				this.sortIndx =  this.dropDownList[index].value;
				this.curPage = 0;
				this.finished = false;
				this.searchListParams();
			},
			allSearch(keyword,curpage) {
				//全文检索
				if(this.isLoadingData){
					return;
				}
				this.fullSearch  = true;
				if(curpage!=undefined){
					this.curPage = curpage;
				}

				if(this.curPage==0){
					this.finished = false;
					this.initLoad = true;
					// this.$refs.fullknwlist.backTop();
				}
				this.isLoadingData = true;//正在加载
				this.type='search';
				let that = this;
				this.isSearch = true;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd:"com.actionsoft.apps.kms_knwl_fullsearch_list_json",
						curPage: this.curPage,
						rowsPerPage: 0,
						searchText: encodeURIComponent(keyword),
						docTypes: JSON.stringify([]),//类型  ["pdf", "doc", "ppt", "xls", "txt"]
						searchType: "1"//1 全文 2 标题剪简介
					},
				}).then(function (r) {
					that.isLoadingData = false;
					that.loading = false;
					that.initLoad = false;
					if (r.result == "error") {
						that.$toast({message: r.data?r.data.desc:r.msg, overlay: true});
						that.finished = true;
					} else {
						that.searchsize = that.resultList.length;
						if(that.curPage==0){
							that.resultList = r.data.data.result;
						}else{
							that.resultList = that.resultList.concat(r.data.data.result);
						}
						that.curPage =  r.data.data.curPage;
						that.loading = false;
						if(!r.data.data.hasNextPage){
							that.finished = true;
						}
					}
				});
			},
			brightKeyword(val) {
				let keyword = this.keyword
				if (val.indexOf(keyword) !== -1) {
					return val.replace(keyword, `<font color='#E72C20'>${keyword}</font>`)
				} else {
					return val
				}
			},
			searchMobileList(pageno){
				if(this.isLoadingData){
					return false;
				}
				this.fullSearch  = false;
				let that = this;
				if(pageno!=undefined){
					this.curPage = pageno;
				}
				if(this.curPage==0){
					this.finished = false;
					if(this.$refs.knwlist){
						this.$refs.knwlist.backTop();
					}

				}
				this.loading = true;
				this.isLoadingData = true;//正在加载
				this.type='knwlhome';
				let option = {
					cmd: "com.actionsoft.apps.kms_knwl_attr_search_dosearch",
					searchDimensionIds: "[]",
					schemaMetaData:this.filterSetting.schemaMetaData,
					curPage:this.curPage<=0?1:this.curPage+1,
					rowsPerPage:0,
					cardName: this.filterSetting.cardName,
					publishTime: this.filterSetting.publishTime,
					publishUser: this.filterSetting.publishUser,
					departId: this.filterSetting.departId,
					tags:this.filterSetting.tags,// encodeURIComponent(JSON.stringify([])),
					sortIndx:this.sortIndx,
					sortDir: "down",
					lastPublishId: '',
					searchType: ""
				};
				// 获取知识列表数据
				awsuiAxios.post({
					url: "jd",
					data: option,
				}).then(function (r) {
					that.isLoadingData = false;
					if (r.result == "error") {
						that.$toast({message: r.data?r.data.desc:r.msg, overlay: true});
					} else {
						that.initLoad = false;
						if(that.curPage<=0){
							// that.resultList = r.data.data;
							that.lists = r.data.data;
						}else{
							that.lists = that.lists.concat(r.data.data);
						}
						that.loading = false;
						that.searchsize = that.lists.length;
						that.curPage = r.data.curPage;
						if(!r.data.hasNextPage){
							that.finished = true;
						}
					}
				});
			},
			searchListParams(){
				this.searchMobileList();

			},
			checkFullsearchAppActive(){
				let that = this;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd:"com.actionsoft.apps.kms_knwl_center_mobile_check_fullsearch"
					},
				}).then(function (r) {
					that.isFullsearchAppActive = r.data.isFullsearchAppActive;

				});
			}
		},
		mounted() {
			let hh = window.innerHeight-51-87;
			this.contentStyle = 'height:'+hh+"px";
			this.checkFullsearchAppActive();
			this.searchListParams();
		},
		watch: {

			keyword: function () {
				var that = this
				if (that.keyword !== '') {
					that.type = 'search'
				}else{
					this.isSearch = false;
				}
			}
		}
	}
</script>

<style scoped>
	.knwlhome {
		height: 100%;
	}

	.knwlhome .content {
		border-top: 0.33px solid #e9e9e9;
		color: #666;
		/*height: 100%;*/
	}

	.top {
		padding: 6px 12px;
		line-height: 17px;
		border-bottom: 0.33px solid #e9e9e9;
		position: relative;
	}

	.icon-descending {
		position: absolute;
		font-size: 16px;
		right: 10px;
	}

	.dropdown-menu {
		position: absolute;
		right: 12px;
		font-weight: normal;
		z-index: 10;
		top: 30px;
		background: #fff;
		padding: 2px 6px;
		box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
		border-radius: 0 0 2px 2px;
	}

	.dropdown-menu .van-sidebar {
		width: auto;
	}

	.dropdown-menu .van-sidebar-item {
		padding: 8px 8px 8px 24px;
		font-size: 12px;
		background: none;
		border-bottom: 1px solid #f6f6f6;
	}

	.dropdown-menu .van-sidebar-item:last-child {
		border-bottom: none;
	}

	.dropdown-menu .van-sidebar-item--select {
		color: #378DEC;
	}

	.dropdown-menu .van-sidebar-item--select::before {
		position: absolute;
		top: 46%;
		left: 6px;
		transform: translateY(-50%);
		content: "\2713";
		background: none;
		font-size: 14px;
	}

	.search-list {
		height: calc(100% - 135px) !important;
		overflow-y: auto;
	}

	.search-list {
		height: calc(100% - 85px) !important;
	}
	.con {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}

	.con .img {
		width: 125px;
		height: 125px;
		margin: 0 auto;
	}

	.con .text {
		color: #999;
		line-height: 20px;
		font-size: 13px;
		width: 100%;
	}
</style>