vue-apps/com.actionsoft.apps.kms.mobile/components/search.vue

<template>
	<div class="search">
		<van-cell-group>
			<form action="/">
				<van-search v-model="title" :disabled="!isFullsearchAppActive" :placeholder="isFullsearchAppActive?'请输入文件内容关键词...':'全文检索应用不可用,无法使用该功能'" show-action @search="onSearch" @input="onInput"
							@clear="onClear">
					<div slot="action" >
						<i @click="showSearchDetail" class="awsui-iconfont" style="color:#1e1e1e;position: absolute;right: 35px;">&#xe64d;</i>
						<i @click="showSearchType" class="awsui-iconfont" style="color:#1e1e1e;">&#xe82d;</i>
					</div>
				</van-search>
				<van-popup v-model="show" position="right" :style="{ width: '90%' }">
					<van-cell-group :border="false" class="search-cell">
						<div class="detail_head">
							<span class="detail_cancel" @click="cancelDetail">取消</span>
							<span style="font-size: 15px;">详细搜索</span>
							<span class="detail_rest" @click="reset">重置</span>
						</div>
						<!--<van-field v-model="creater" label="发布人" placeholder="请输入发布人姓名"/>-->

						<van-field type="text"
								   label="发布人"
								   v-model="searchUerText"
								   @focus="showUserDropdown=true"
								   @blur="handleUserBlur"
								   @keydown.up="navigateUpUser"
								   @keydown.down="navigateDownUser"
								   @keydown.enter="selectUserOptions"
								   placeholder="请输入发布人"
								   class="search-input"/>
						<!-- 下拉列表 -->
						<div v-if="showUserDropdown" class="dropdown-menuuser">
							<div
									v-for="(option, index) in filteredUserOptions"
									:key="index"
									class="dropdown-itemuser"
									@click="selectUserOptions(option)"
									:class="{ 'dropdown-item-activeuser': selectedUserIndex === index }"
							>
								{{ option.text }}
							</div>
						</div>
						<van-field style="display: none" v-model="selectedUser" label="人员ID" />

						<van-field readonly v-model="startDateTitle" label="起始日期" placeholder="请选择起始日期"
								   @click="startDatePopup = true"/>
						<van-popup v-model="startDatePopup" position="bottom" style="height:300px" get-container="body">
							<van-datetime-picker v-model="currentStartDate" type="date" :max-date="startMaxDate"
												 @confirm="confirmStartDate" @cancel="cancelStartDate" :show-toolbar="true"
												 cancel-button-text="清除"/>
						</van-popup>
						<van-field readonly v-model="endDateTitle" label="结束日期" placeholder="请选择结束日期" @click="endDatePopup = true"/>
						<van-popup v-model="endDatePopup" position="bottom" style="height:300px" get-container="body">
							<van-datetime-picker v-model="currentEndDate" :min-date="endMinDate" type="date" :max-date="endMaxDate"
												 @confirm="confirmEndDate" @cancel="cancelEndDate" :show-toolbar="true"
												 cancel-button-text="清除"/>
						</van-popup>

						<van-field type="text"
								   label="发布部门"
								   v-model="searchText"
								   @focus="showDropdown = true"
								   @blur="handleBlur"
								   @keydown.up="navigateUp"
								   @keydown.down="navigateDown"
								   @keydown.enter="selectOption"
								   placeholder="请输入发布部门"
								   class="search-input"/>
						<!-- 下拉列表 -->
						<div v-if="showDropdown" class="dropdown-menu">
							<div
									v-for="(option, index) in filteredOptions"
									:key="index"
									class="dropdown-item"
									@click="selectOption(option)"
									:class="{ 'dropdown-item-active': selectedIndex === index }"
							>
								{{ option.text }}
							</div>
						</div>

						<van-field style="display: none" v-model="selectedDep"/>

						<van-field v-model="knwlName" label="知识名称" placeholder="请输入知识名称"/>
						<!--<van-field v-model="knwlTag" label="标签" placeholder="请输入知识标签"/>-->
						<div class="footer">
							<van-button style="width: 85%;" native-type="button" size="small" type="info" @click="onDetailSearch">查询</van-button>
						</div>
					</van-cell-group>
				</van-popup>

				<van-popup v-model="typeShow" position="right" :style="{ width: ' calc(85% - 10px)',height:'100%',padding:'10px 10px' }">
					<div class="schema_head">
						<span class="schema_cancel" @click="cancelSchema">取消</span>
						<span style="font-size: 15px;">元数据</span>
						<span class="schema_rest" @click="resetSchema">重置</span>
					</div>
					<ul class="list" style="height: calc(100% - 96px);overflow: hidden;overflow-y: auto">
						<li v-for="(item,index) in schemaList" :key="index">
							<div :class="item.isNullable==1?'title':'title required' " >
								{{item.schemaTitle}}
								<span v-show="item.showType==1" @click="clearData(item)" style="float: right">清空</span>
							</div>
							<div class="con">
						  <span v-show="item.showType<2" class="classify"
								:style="(index+1)%3===0?'width: calc(100% / 3 - 17px); margin-right:1px;':''"
								v-for="(el,index) in item.attrList" :key="index" @click="onClassify(el,item)"
								:class="{classActive:el.active}">
							<label class="name">{{el.attrTitle}}</label>
						  </span>
								<div v-show="item.showType==2">
									<van-field v-model="item.value" placeholder="请输入..." />
								</div>
							</div>
						</li>
					</ul>
					<div class="schema_footer">
						<van-button style="width: 85%" native-type="button" size="small" type="info" @click="schemaSearch">确定</van-button>
					</div>
				</van-popup>

			</form>
		</van-cell-group>

	</div>

</template>
<script>
	import awsuiAxios from "../awsuiAxios";
	import { Popup, Field, Cell, CellGroup, Empty } from 'vant';

	export default {
		name: 'search',
		components: {
			[Popup.name]: Popup,
			[Field.name]: Field,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Empty.name]: Empty
		},
		props: {
			keyword: { // 必须要使用value
				type: String,
				default: ''
			},
			filterSetting:{
				type:Object,
				default:()=>{
					return {};
				}
			},
			isFullsearchAppActive:Boolean
		},
		data() {
			return {
				dimensionResult:"",
				typeShow:false,
				show: false,
				title: this.keyword,
				creater: '',
				createrDept: '',
				knwlName: '',
				publishDep: '',
				knwlTag: '',
				currentEndDate: new Date(),
				startMaxDate: new Date(),
				endMaxDate: new Date(),
				endMinDate:new Date(),
				startDatePopup: false,
				endDatePopup: false,
				startDateTitle: '',
				endDateTitle: '',
				schemaList:[],


				/**********************发布部门*********************/

				selectedOption: null,
				searchText: '',
				showDropdown: false,
				selectedIndex: -1,
				options: [
				],
				selectedDep:"",
				/***********************发布人****************************/
				selectedUserOption: null,
				searchUerText: '',
				showUserDropdown: false,
				selectedUserIndex: -1,
				useroptions: [
				],
				selectedUser:""


			}
		},

		computed: {

			filteredOptions() {
				return this.options.filter(option =>
						option.text.toLowerCase().includes(this.searchText.toLowerCase())
				);
			},
			filteredUserOptions() {
				return this.useroptions.filter(option =>
						option.text.toLowerCase().includes(this.searchUerText.toLowerCase())
				);
			},
			currentStartDate: {
				get() {
					let now = new Date()
					now.setMonth(now.getMonth() - 1)
					return now
				},
				set() {
				}
			}
		},
		methods: {

			/**************************发布部门********************************/
			handleBlur() {
				// 可以在此处添加逻辑，例如如果搜索框为空则隐藏下拉列表
				setTimeout(() => {
					if (!this.searchText) {
						this.showDropdown = false;
						this.selectedIndex = -1;
					}
				}, 200); // 延迟是为了等待可能的点击事件（如果点击在了下拉列表上，则不隐藏）
			},
			navigateUp() {
				if (this.selectedIndex > 0) {
					this.selectedIndex -= 1;
				} else if (this.selectedIndex === -1 && this.filteredOptions.length > 0) {
					this.selectedIndex = this.filteredOptions.length - 1;
				}
				this.scrollToSelected();
			},
			navigateDown() {
				if (this.selectedIndex < this.filteredOptions.length - 1) {
					this.selectedIndex += 1;
				} else {
					this.selectedIndex = -1;
				}
				this.scrollToSelected();
			},
			scrollToSelected() {
				const dropdownMenu = this.$el.querySelector('.dropdown-menu');
				if (dropdownMenu && this.selectedIndex !== -1) {
					const item = dropdownMenu.querySelector('.dropdown-item-active') || dropdownMenu.children[0];
					item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
				}
			},
			selectOption(option) {
				this.showDropdown = false;
				this.selectedIndex = -1;
				this.selectedOption = option.text;
				this.searchText = option.text; // 回填到输入框
				this.selectedDep=option.value;
			},

			/********************发布部门结束*********************************/


			/**********************发布人开始***************************************/
			handleUserBlur() {
				// 可以在此处添加逻辑，例如如果搜索框为空则隐藏下拉列表
				setTimeout(() => {
					if (!this.searchUerText) {
						this.showUserDropdown=false;
						this.selectedUserIndex=-1;
					}
				}, 200); // 延迟是为了等待可能的点击事件（如果点击在了下拉列表上，则不隐藏）
			},
			navigateUpUser() {
				if (this.selectedUserIndex > 0) {
					this.selectedUserIndex -= 1;
				} else if (this.selectedUserIndex === -1 && this.filteredUserOptions.length > 0) {
					this.selectedUserIndex = this.filteredUserOptions.length - 1;
				}
				this.scrollToSelectedUser();
			},
			navigateDownUser() {
				if (this.selectedUserIndex < this.filteredUserOptions.length - 1) {
					this.selectedUserIndex += 1;
				} else {
					this.selectedUserIndex = -1;
				}
				this.scrollToSelectedUser();
			},
			scrollToSelectedUser() {
				const dropdownUserMenu = this.$el.querySelector('.dropdown-menuuser');
				if (dropdownUserMenu && this.selectedUserIndex !== -1) {
					const item = dropdownUserMenu.querySelector('.dropdown-item-activeuser') || dropdownUserMenu.children[0];
					item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
				}
			},
			selectUserOptions(option) {
				this.showUserDropdown=false;
				this.selectedUserIndex=-1;
				this.selectUserOption=option.text;
				this.searchUerText=option.text; // 回填到输入框
				this.selectedUser=option.value;
			},


			/**********************发布人结束***************************************/

			onSearch(value) {
				if(value!=''){
					this.$emit('allSearch', value,0);
				}else{
					this.$emit('searchfunc');
				}
			},
			onInput(value) {
				// if(value!=''){
				//   this.$emit('allSearch', value,0);
				// }else{
				//   this.$emit('searchfunc');
				// }
			},
			onClear() {
				document.title = '知识门户'
			},
			showSearchType(){
				this.typeShow = true;
			},
			showSearchDetail() {
				this.show = true
			},
			onCell(event, item, index, checkbox){

			},
			reset() {
				this.title = ''
				this.from = ''
				this.startDateTitle = ''
				this.endDateTitle = '';
				// this.show = false;
				this.rest = true;
				this.creater='';
				this.knwlName='';
				this.knwlTag='';
				this.filterSetting.cardName = "";
				this.filterSetting.publishTime = "";
				this.filterSetting.publishUser = "";

				this.filterSetting.selectedDep = "";
				this.filterSetting.selectedUser = "";

				this.searchText = "";
				this.searchUerText = "";

				this.filterSetting.tags = encodeURIComponent(JSON.stringify([]));
				this.filterSetting.schemaMetaData = encodeURIComponent(JSON.stringify({
					'01': [],
					'2': []
				}));
				this.$emit('searchfunc',0);
			},
			cancelDetail(){
				this.show = false;
			},
			onDetailSearch() {
				// 参数-标签
				let tags = [];
				if (this.knwlTag != '') {
					tags[0] = this.knwlTag;
				}
				let publicTime = {
					"startPublishTime":this.startDateTitle,
					"endPublishTime":this.endDateTitle
				}
				this.filterSetting.cardName = encodeURIComponent(this.knwlName);
				this.filterSetting.publishTime = JSON.stringify(publicTime);
				this.filterSetting.publishUser = this.selectedUser;
				this.filterSetting.tags = encodeURIComponent(JSON.stringify(tags));
				//获取发布部门
				this.filterSetting.departId = this.selectedDep;
				this.show = false
				this.$emit('searchfunc',0);
			},
			cancelStartDate() {
				this.startDateTitle = '';
				const now = new Date();
				let endY = new Date(now.setDate(now.getDate() - 365*10));
				this.endMinDate = endY;
				this.startDatePopup = false
			},
			confirmStartDate(val) {
				this.startDateTitle = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
				this.endMinDate = val;
				this.startDatePopup = false
			},
			cancelEndDate() {
				this.endDateTitle = ''
				this.endDatePopup = false
			},
			confirmEndDate(val) {
				this.endDateTitle = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
				if(this.startDateTitle==''){
					this.startMaxDate=new Date(this.endDateTitle );
				}
				this.endDatePopup = false
			},
			getSchema(){
				let that = this;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_knwl_search_schema_attr_list_json"

					},
				}).then(function (r){

					if (r.result == "error") {
					} else{
						let tmp = r.data;
						let tmpSchemaList = [];
						for(let key in tmp){
							let tmpV = tmp[key];
							let attrl = tmpV['attrList'];
							attrl.forEach((ob, index) => {
								ob.active = false;
							})
							if(tmpV.showType==2){
								tmpV.schemaId = key;
							}
							tmpSchemaList.push(tmp[key]);
						}
						that.schemaList = tmpSchemaList;
					}
				});
			},
			schemaSearch(){
				this.typeShow = false;
				// 取值-元数据
				let newschemaMetaData01=[];
				let schemaMetaData2=[];
				for(let k=0;k<this.schemaList.length;k++){
					let obj = this.schemaList[k];
					if(obj.showType==2){
						let val = obj.value?obj.value:'';
						if(obj.isNullable==0&&val.trim()==''){
							continue;
						}
						schemaMetaData2[schemaMetaData2.length] = {
							metaValue: val.trim(),
							schemaId: obj.schemaId
						};
					}else{
						let attrList = obj.attrList;
						let activeL = 0;
						for(let j=0;j<attrList.length;j++){
							let ob = attrList[j];
							if(ob.active){
								activeL++;
								newschemaMetaData01.push({
									attrId:ob.id,
									schemaId:ob.schemaId
								})
							}
						}

					}
				}
				let schemaMetaData ={
					'01': newschemaMetaData01, // 复选框和单选按钮
					'2': schemaMetaData2
				}
				this.filterSetting.schemaMetaData = encodeURIComponent(JSON.stringify(schemaMetaData));
				this.onDetailSearch();
			},
			resetSchema(){
				for(let k=0;k<this.schemaList.length;k++){
					let obj = this.schemaList[k];
					if(obj.showType==2){
						if( obj.value){
							obj.value = "";
						}
					}else{
						let attrList = obj.attrList;
						attrList.forEach((ob, index) => {
							ob.active = false;
						})

					}
				}
			},
			cancelSchema(){
				this.typeShow = false;
				this.resetSchema();
			},
			clearData(itemTmp){
				itemTmp.attrList.forEach((ob, index) => {
					ob.active = false;
				})
			},
			onClassify(el,itemTmp) {
				if(!el.active){
					if(itemTmp.showType==1){//单选
						itemTmp.attrList.forEach((ob, index) => {
							ob.active = false;
						})
					}
				}
				el.active = !el.active;
			},


			/*****************************选择组织*********************************/
			//查询发布部门数据
			getDeptment(){
				let that = this;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_knwl_search_getdeptment_list_json"
					},
				}).then(function (r){
					if (r.result == "error") {
					} else{
						let tmp = r.data.data;
						for(var i=0;i<tmp.length;i++){
							that.options.push({ text: tmp[i].text, value: tmp[i].value});
						}
					}
				});
			},
			//获取人员数据
			getUserInfo(){
				let that = this;
				awsuiAxios.post({
					url: "jd",
					data: {
						cmd: "com.actionsoft.apps.kms_knwl_search_getuser_list_json"
					},
				}).then(function (r){
					if (r.result == "error") {
					} else{
						let tmp = r.data.data;
						for(var i=0;i<tmp.length;i++){
							that.useroptions.push({ text: tmp[i].text, value: tmp[i].value});
						}
					}
				});
			}

		},

		watch: {
		},
		mounted(){
			const now = new Date();
			let endY = new Date(now.setDate(now.getDate() - 365*10));
			this.endMinDate = endY;
			this.getSchema();
			this.getDeptment();
			this.getUserInfo();

		}
	}
</script>

<style scoped>
	.search .van-popup--right {
		transform: translate3d(0, 0, 0);
		top: 0;
		bottom: 0;
	}

	.search-cell {
		position: relative;
	}

	.search-cell .van-cell {
		color: #707070;
		font-size: 13px;
	}

	.footer {
		padding: 10px ;
		text-align: center;
	}

</style>
<style>
	.search-cell .van-field__control {
		padding: 0 5px;
		font-size: 12px;
		border-radius: 2px;
		color: #707070;
		-webkit-appearance: none;
		border: 0.33px solid #e9e9e9 !important;
	}

	.dimension {
		height: 100%;
	}

	.dimension .content {
		border-top: 0.33px solid #e9e9e9;
		height: calc(100% - 105px);
		overflow-y: auto;
	}

	.dimension .content .item {
		padding: 0 12px;
		background: #fff;
	}

	.dimension .content .item .checkbox {
		width: 16px;
		position: absolute;
		top: 4px;
		right: 20px;
	}


	.dimension .content .divide {
		background: #e9e9e9;
		width: 100%;
		height: 12px;
	}

	.dimension .content .van-cell {
		padding: 8px 0;
		border-bottom: 1px solid #efefef;
	}

	.dimension .content .van-cell:last-child {
		/*border-bottom: 0;*/
	}

	.dimension .content .van-cell .awsui-iconfont {

		margin-right: 8px;
	}

	.dimension .content .van-cell .default {
		color: #CCCCCC;
	}
	.treeDimension-noPerm,.treeHotspot-noPerm{
		color: #CCCCCC;
	}
	.treeDimension,.treeHotspot{
		color: #03A76B;
	}
	.treeHotspot {
		color:#f3b731 !important;
	}
	.list li {
		float: left;
		padding: 12px 0 4px;
		width: 100%;
		position: relative;
		border-bottom: 0.33px solid #e9e9e9;
	}

	.list li:not(:last-child) {
		border-bottom: 0.33px solid #e9e9e9;
	}

	.list li .title, .tag .title {
		font-size: 14px;
		padding: 0;
		background: none;
		width: 100%;
		line-height: 19px;
		color: #646566;
	}

	.list li .con, .tag .con {
		padding: 12px 0 0;
		position: relative;
		float: left;
		width: 100%;
	}
	.list li .con .classify, .tag .con .classify {
		width: calc(100% / 3 - 16px - 10px);
		height: 30px;
		line-height: 16px;
		padding: 5px 8px;
		margin-right: 10px;
		margin-bottom: 8px;
		border-radius: 2px;
		background: #F5F5F5;
		float: left;
		display: flex;
		align-items: center;
		text-align: center;
		cursor: pointer;
	}

	.tag .con .classify {
		height: auto;
		line-height: 20px;
	}

	.list li .con .classify .name, .tag .con .classify .name {
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 100%;
		cursor: pointer;
	}
	.con .classActive {
		background: #E1EFFF !important;
		color: #1B6EC9;
	}
	.list li .con .classify:last-child {
		margin-right: 0;
	}
	.classify .name{
		font-size: 13px;
	}
	.required:before{
		content: '*';
		color: red;
	}
	.schema_head,.detail_head{
		text-align: center;
		font-size: 14px;
		border-bottom: 0.33px solid #e9e9e9;
		height: 31px;
		padding: 10px;
		padding-bottom: 0px;
	}
	.schema_cancel,.detail_cancel{
		float: left;
		color:#646566 ;
	}
	.schema_rest,.detail_rest{
		float: right;
		color: #1b6ec9;
	}
	.schema_footer{
		position: absolute;
		bottom: 30px;
		width: calc(100% - 20px);
		text-align: center;
	}
	.van-search__content{
		padding-right: 16px;
	}
	.selected-value{
		display: none;
	}


	/*********************发布部门*******************************/
	.dropdown-menu {
		/*position: absolute;*/
		/*top: 100%;*/
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #fff;
		border: 1px solid #ccc;
		max-height: 200px;
		overflow-y: auto;
	}

	.dropdown-item {
		padding: 8px;
		cursor: pointer;
	}

	.dropdown-item-active {
		background-color: #eee;
	}

	.selected-value {
		font-size: 14px;
		color: #333;
		margin-top: 10px;
	}
	/*****************发布人开始****************/

	.dropdown-menuuser {
		/*position: absolute;*/
		/*top: 100%;*/
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #fff;
		border: 1px solid #ccc;
		max-height: 200px;
		overflow-y: auto;
	}

	.dropdown-itemuser {
		padding: 8px;
		cursor: pointer;
	}

	.dropdown-item-activeuser {
		background-color: #eee;
	}

	.selected-valueuser {
		font-size: 14px;
		color: #333;
		margin-top: 10px;
	}


	/*****************发布人结束****************/
</style>