表格检索封装

src/components/scDatePicker/index.vue

@@ -8,7 +8,10 @@
 
 <template>
 	<div class="scDatePicker">
-		<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size" :popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable></el-date-picker>
+		<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size"
+			:popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable
+			:default-time="defaultTime"
+		></el-date-picker>
 	</div>
 </template>
 
@@ -37,6 +40,7 @@ export default {
 	data(){
 		return{
 			localDatePicker:[],
+			defaultTime:[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]
 		}
 	},
 	mounted() {

src/components/scInput/index.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Descripttion: 关键字组件
+ * @Author: 龙运模
+ * @Date: 2024年07月11日
+ * @LastEditors: 龙运模
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="scDatePicker">
+		<el-input v-bind="$attrs" class="input" v-model="localText" @input="textChange" :size="size" :placeholder="placeholder" clearable></el-input>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		activation_text: {
+			type: String,
+			default: ""
+		},
+		size:{ type: String, default: "small" },
+		placeholder:{type:String, default:"请输入关键字"},
+	},
+	watch:{
+		activation_text:{
+			handler(val){
+				this.localText = val;
+			},
+			deep:true
+		}
+	},
+	data(){
+		return{
+			localText:this.activation_text,
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		textChange(e){
+			this.localText = e;
+			this.emitActivationText();
+		},
+		emitActivationText() {
+			this.$emit('update:activation_text', this.localText);
+			this.$emit('fetchData');
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.scDatePicker{
+	width: 100%;
+}
+</style>

src/components/scMultipleSelect/index.vue

@@ -18,7 +18,7 @@
 export default {
 	name: "index",
 	props:{
-		select_params: {
+		activation_select: {
 			type: Object,
 			default: () => ({ operator: "in", value: [] })
 		},
@@ -26,7 +26,7 @@ export default {
 		placeholder:{type:String, default:"请选择"},
 	},
 	watch:{
-		select_params:{
+		activation_select:{
 			handler(val){
 				if(!val || val.value.length == 0){
 					this.localData = [];
@@ -52,8 +52,8 @@ export default {
 			this.emitActivationSelect();
 		},
 		emitActivationSelect() {
-			this.$emit('update:select_params', {
-				operator: this.select_params.operator,
+			this.$emit('update:activation_select', {
+				operator: this.activation_select.operator,
 				value: this.localData? this.localData:[]
 			});
 		}

src/components/scSearch/index.vue

@@ -0,0 +1,137 @@
+<template>
+	<div v-for="item in columnList" :key="item">
+		<div class="searchItem" v-if="item.type == 'date'">
+			<label class="name">{{item.name}}</label>
+			<scDatePicker :size="size" v-model:activation_date="params.activation_date" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
+		</div>
+		<div class="searchItem" v-if="item.type =='multiple'">
+			<label class="name">{{item.name}}</label>
+			<scMultipleSelect :size="size" v-model:activation_select="params.id" @fetchData="getSelect(item,$event)" :placeholder="item.placeholder" multiple collapse-tags filterable clearable>
+				<el-option v-for="em in item.data" :key="em" :label="em.full_name" :value="em.id"></el-option>
+			</scMultipleSelect>
+		</div>
+		<div class="searchItem" v-if="item.type == 'select'">
+			<label class="name">{{item.name}}</label>
+			<el-select class="input" :size="size" v-model="params.active_status" @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.active_status"></el-option>
+			</el-select>
+		</div>
+		<div class="searchItem" v-if="item.type == 'text'">
+			<label class="name">{{item.name}}</label>
+			<scInput class="input" v-model:activation_text="keywordParams" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput>
+		</div>
+	</div>
+</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') {
+					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==''?"":params;
+				}
+			})
+			return grouped
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>