xw_admin/src/components/scSearch/index.vue

<template>
	<div v-for="item in columnList" :key="item">
		<div class="searchItem" v-if="item.type == 'date' && ((item.isOpen && item.show) || item.show)">
			<label class="name">{{item.name}}</label>
			<scDatePicker :size="size" v-model:activation_date="params[item.code]" @visible-change="getSelect(item,$event)" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
		</div>
		<div class="searchItem" v-if="item.type =='multiple' && ((item.isOpen && item.show) || item.show)">
			<label class="name">{{item.name}}</label>
			<scMultipleSelect :size="size" v-model:activation_select="params[item.code]" @fetchData="getSelect(item,$event)" :placeholder="item.placeholder" multiple collapse-tags filterable clearable>
				<el-option v-for="em in item.data" :key="em" :label="em.label" :value="em.id"></el-option>
			</scMultipleSelect>
		</div>
		<div class="searchItem" v-if="item.type == 'select' && ((item.isOpen && item.show) || item.show)">
			<label class="name">{{item.name}}</label>

			<el-select class="input" :size="size" v-model="params[item.code]" @visible-change="getSelect(item,$event)" :placeholder="item.placeholder" filterable clearable>
				<el-option v-for="em in item.data" :key="em" :label="em.label" :value="em[item.code[0]] || em.active_status"></el-option>
			</el-select>
		</div>
		<div class="searchItem" v-if="item.type == 'text' && ((item.isOpen && item.show) || item.show)">
			<label class="name">{{item.name}}</label>
			<div v-if="item.keyword">
				<scInput class="input" v-model:activation_text="keywordParams" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput>
			</div>
			<div v-else>
				<div v-if="typeof item.code == 'string'">
					<scInput class="input" v-model:activation_text="params[item.code]" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput>
				</div>
				<div v-else>
					<scVgInput class="input" v-model:activation_text="params[item.code]" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scVgInput>
				</div>
			</div>
		</div>
	</div>
	<slot></slot>
</template>

<script>
export default {
	name: "index",
	emits: ['fetchSelectData'],
	props:{
		searchList:{type: Array},
	},
	watch:{
		searchList:{
			handler(val){
				if(val && val.length>0){
					this.params = this.groupByType(val);
				}
			},
			immediate:true,
		},
		keywordParams:{
			handler(val) {
				for(let i in this.params){
					if(this.params[i].keyword){
						this.params[i].value = val===""?"":'%'+val+'%';
					}
				}
			},
			immediate:true
		}
	},
	data(){
		return{
			size:"small",
			columnList:this.searchList,
			selectItem:'',
			selectShow:false,

			params:{},
			keywordParams:"",
		}
	},
	mounted() {

	},
	methods:{
		getSelect(item,e){
			if(!e) return
			this.$emit('fetchSelectData',{data:item,params:this.params});
		},
		getText(item){
			this.$emit('fetchSelectData',{data:item,params:this.params});
		},

		reload(){
			this.keywordParams = "";
			for(let i in this.params){
				if(typeof this.params[i] === "object" && this.params[i] !=null){
					if(typeof this.params[i].value == "string"){
						this.params[i].value = "";
					}else{
						this.params[i].value = [];
					}
				}else{
					this.params[i] = "";
				}
			}
		},

		groupByType(list){
			const grouped = {};
			list.forEach(item=>{
				if (!grouped[item.code]) {
					if(typeof item.code == 'string'){
						grouped[item.code] = {};
					}
				}
				if (item.type === 'text' && Array.isArray(item.code)) {
					item.code.forEach(code => {
						if(!grouped[code]){
							grouped[code] = {};
						}

						let params = {};
						if(item.keyword){
							params = {
								keyword:true,
								operator:'like',
								value:""
							}
						}else{
							params = {
								operator:'like',
								value:""
							}
						}
						grouped[code] = params;
					});
				} else {
					let operator = item.type == 'date'?'between':item.type == 'multiple'?'in':item.type == 'text'?'link':'';
					let params = {
						operator:operator,
						value:operator=='link'?"":[]
					}
					grouped[item.code] = operator=='' || operator== 'link'?"":params;
				}
			})
			return grouped
		},
	}
}
</script>

<style scoped lang="scss">

</style>