优化表头检索组件

src/components/scTable/columnSetting.vue

@@ -28,11 +28,8 @@
 						<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
 					</span>
 					<span class="type_b">
-						<el-select v-model="item.condition" size="small">
+						<el-select v-model="item.condition" size="small" disabled>
-							<el-option value="link"></el-option>
+							<el-option :value="item.value" :label="item.label" v-for="(item,index) in conditionList" :key="index"></el-option>
-							<el-option value="in"></el-option>
-							<el-option value="between"></el-option>
-							<el-option value="="></el-option>
 						</el-select>
 					</span>
 					<span class="sortable_b">
@@ -65,6 +62,22 @@
 		},
 		data() {
 			return {
+				conditionList:[
+					{label:'包含',value:'like'},
+					{label:'在列表',value:'in'},
+					{label:'不在列表',value:'not in'},
+					{label:'区间',value:'between'},
+					{label:'不在区间',value:'not between'},
+					{label:'空值',value:'is null'},
+					{label:'非空值',value:'is not null'},
+					{label:'等于',value:'='},
+					{label:'小于',value:'<'},
+					{label:'小于等于',value:'<='},
+					{label:'大于',value:'>'},
+					{label:'大于等于',value:'>='},
+					{label:'范围',value:'<>'},
+					{label:'不等于',value:'!='},
+				],
 				isSave: false,
 				usercolumn: JSON.parse(JSON.stringify(this.column||[]))
 			}

src/components/scTable/components/headerSearch.vue

@@ -1,22 +1,22 @@
 <template>
-	<div class="headerSearch" v-for="(item,index) in columnList" :key="item">
+	<div class="headerSearch" v-for="(item,index) in columnList" :key="item" @click="hidePopover">
-		<div class="searchItem" v-if="item.search_type == 'date_range' && (searchShow || (!searchShow && index<4)) && !item.hide">
+		<div class="searchItem" v-if="item.search_type == 'date_range' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
 			<label class="name">{{item.label}}</label>
 			<scDatePicker :size="size" v-model:activation_date="params[item.prop]" @change="changeData" @visible-change="getSelect(item,$event)" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
 		</div>
-		<div class="searchItem" v-if="item.search_type =='checkbox' && (searchShow || (!searchShow && index<4)) && !item.hide">
+		<div class="searchItem" v-if="item.search_type =='checkbox' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
 			<label class="name">{{item.label}}</label>
 			<scMultipleSelect :size="size" v-model:activation_select="params[item.prop]" @changeSelectData="changeData" @fetchData="getSelect(item,$event)" :placeholder="'请选择'+item.label" multiple collapse-tags filterable clearable>
 				<el-option v-for="em in item.data" :key="em" :label="em.label" :value="em.value || em.id"></el-option>
 			</scMultipleSelect>
 		</div>
-		<div class="searchItem" v-if="item.search_type == 'select' && (searchShow || (!searchShow && index<4)) && !item.hide">
+		<div class="searchItem" v-if="item.search_type == 'select' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
 			<label class="name">{{item.label}}</label>
 			<el-select class="input" :size="size" v-model="params[item.prop]" @change="changeData" @visible-change="getSelect(item,$event)" :placeholder="'请选择'+item.label" 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.search_type == 'text' && (searchShow || (!searchShow && index<4)) && !item.hide">
+		<div class="searchItem" v-if="item.search_type == 'text' && (searchShow || (!searchShow && index<4)) && !item.hide && item.is_search">
 			<label class="name">{{item.label}}</label>
 			<div>
 				<scVgInput class="input" v-model:activation_text="params[item.prop]" @fetchData="getText(item,$event)" :placeholder="'请输入'+item.label" :size="size"></scVgInput>
@@ -40,7 +40,8 @@ export default {
 		searchList:{
 			handler(val){
 				if(val && val.length>0){
-					this.columnList = val.filter(em=> !em.hide);
+					this.columnList = val.filter(em=> !em.hide && em.is_search);
+					// console.log(this.columnList,233)
 					this.params = this.groupByType(val);
 				}
 			},
@@ -92,6 +93,8 @@ export default {
 		},
 		getText(item){
 			this.$emit('fetchSelectData',{data:item,params:this.params});
+		},
+		hidePopover(){
 			eventBus.$emit('close-all-popovers');
 		},
 		reload(){

src/components/scTable/components/typePopover.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="popoverBox">
-		<el-popover :visible="visible" placement="bottom-end" :ref="`popover-${columnIndex}`" popper-class="customPopper">
+		<div class="handlerView" ref="buttonRef">
-			<template #reference>
 			<span v-if="column.is_search && !column.hide" class="label" :class="filterModelParams.data[column.prop] && filterModelParams.data[column.prop].value!=''?'labelColor':''" style=" cursor: pointer;" @click.stop="clickShow(column)">
 				<span class="name">{{ column.label }}</span>
 				<el-icon class="sc-trend-icon"><sc-icon-Filter /></el-icon>
@@ -9,7 +8,10 @@
 			<span v-else class="label name" @click.stop>
 				{{ column.label }}
 			</span>
-			</template>
+		</div>
+
+		<div class="customPopperView" v-if="visible">
+			<el-popover :visible="visible" placement="bottom-end" :virtual-ref="buttonRef" virtual-triggering :ref="`popover-${columnIndex}`" popper-class="customPopper">
 				<!-- text 文本 -->
 				<div v-if="column.search_type == 'text'" @click.stop>
 					<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" :size="size" clearable v-model="filterValue" placeholder="请输入查询内容" @clear="filterClear"></el-input>
@@ -47,6 +49,7 @@
 				</div>
 			</el-popover>
 		</div>
+	</div>
 </template>
 <script>
 /**
@@ -56,8 +59,12 @@ import { inject } from "vue";
 import {eventBus} from "@/utils/eventBus"
 export default {
 	name: 'typePopover',
+	directives: {
+
+	},
 	data() {
 		return {
+			buttonRef:{},
 			visible: false,
 			size: 'small',
 			checkedColumn: {},
@@ -101,6 +108,7 @@ export default {
 			eventBus.$emit('close-all-popovers');
 			this.visible = !wasVisible;
 			if (this.visible) {
+				this.buttonRef = this.$refs.buttonRef;
 				this.checkedColumn = column;
 				if (this.filterModelParams && this.filterModelParams.data && this.filterModelParams.data[column.prop]) {
 					switch (column.search_type){
@@ -155,15 +163,9 @@ export default {
 		},
 		closeVisible(){
 			this.visible = false;
-			// this.$nextTick(()=>{
-			// 	this.$refs['popover-'+this.columnIndex].hide();
-			// })
 		},
 		closePopover() {
 			this.visible = false;
-			// this.$nextTick(()=>{
-			// 	this.$refs['popover-'+this.columnIndex].hide();
-			// })
 		},
 		/** 日期清空的处理 */
 		dateChange(val) {
@@ -179,20 +181,25 @@ export default {
 			}
 			switch (this.checkedColumn.search_type){
 				case 'text':
-					params.value = this.filterValue?this.checkedColumn.condition==="="?this.filterValue:'%'+this.filterValue+'%':""
+					params.value = ""
 					break;
 				case 'date_range':
-					params.value = this.filterValue.length>0? this.filterValue.map((date,index) => index===0? this.$TOOL.formatStartTime(date):this.$TOOL.formatEndTime(date)):[];
+					params.value = [];
+					break;
+				case 'checkbox':
+					params.value = [];
 					break;
 				default:
-					params.value = this.filterValue;
+					params.value = "";
 					break
 			}
-			this.filterTagClose(params);
+			this.filterValue = "";
+			this.filterTagClose({[this.checkedColumn.prop]:params});
 		},
 		/** 重置输入框值 */
 		resetFilter(){
 			this.filterValue = "";
+			this.visible = false;
 		}
 	},
 }
@@ -202,6 +209,10 @@ export default {
 	display: flex;
 	align-items: center;
 	width: 100%;
+	position: relative;
+	.handlerView{
+		width: 100%;
+	}
 	.label{
 		width: 100%;
 		.el-icon{

src/utils/tool.js

@@ -172,29 +172,25 @@ tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
 /* 转时间戳 开始时间 */
 tool.formatStartTime = function(time){
 	let date = new Date(time);
-	date.setHours(0);
+	date.setHours(0,0,0);
 	return Math.floor(date.getTime() / 1000)
 }
 /* 转时间戳 结束时间 */
 tool.formatEndTime = function(time){
 	let date = new Date(time);
-	date.setHours(23);
+	date.setHours(23,59,59);
 	return Math.floor(date.getTime() / 1000)
 }
 /* 时间戳转日期 开始 */
 tool.getStartTime = function (time){
 	let date = new Date(time * 1000);
-	date.setHours(0);
+	date.setHours(0,0,0);
-	tool.dateFormat(date,'yyyy-MM-dd');
-	// return date.toISOString();
 	return tool.dateFormat(date,'yyyy-MM-dd');
 }
 /* 时间戳转日期 结束 */
 tool.getEndTime = function(time){
 	let date = new Date(time * 1000);
-	date.setHours(23);
+	date.setHours(23,59,59);
-	tool.dateFormat(date,'yyyy-MM-dd');
-	// return date.toISOString()
 	return tool.dateFormat(date,'yyyy-MM-dd');
 }
 

src/views/order/orderList/index.vue

@@ -24,14 +24,11 @@
 		<el-main class="nopadding">
 			<div class="flowPath">
 				<flow :list="flowList"/>
-<!--				<video src="blob:https://y.qq.com/e5c50681-05f0-42a0-b70a-47c651a881d7">-->
-<!--					-->
-<!--				</video>-->
 			</div>
 			<div class="searchMain searchMainNoTop">
 				<scTableSearch ref="scSearch" :searchList="list.column" :paramsData="params" :searchShow="searchShow" @fetchSelectData="getSelectData" @changeHeaderData="getHeaderData"></scTableSearch>
 
-				<div class="searchItem searchBtn">
+				<div class="searchItem searchBtn" v-if="searchHeaderShow">
 					<el-button :size="size" :icon="searchShow?'el-icon-ArrowUpBold':'el-icon-ArrowDownBold'" @click="searchShowClick">{{searchShow?'收起':'更多'}}</el-button>
 					<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
 					<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
@@ -120,6 +117,7 @@ export default {
 			selection: [],
 			exportShow:false,
 			searchShow:false,
+			searchHeaderShow:false,
 			filterMap:{
 				data:{}
 			},
@@ -136,12 +134,23 @@ export default {
 			filterModelParams:this.filterModelParams,
 		}
 	},
+	watch:{
+		'list.column':{
+			handler(val){
+				this.searchHeaderShow = val.length>0 && val.some(em=>em.is_search);
+			},
+			immediate:false,
+			deep:true
+		}
+	},
 	computed:{
 		filterModelParams(){
 			return this.filterMap
-		}
+		},
 	},
 	mounted() {
+		this.buttonRef = this.$refs.buttonRef;
+
 		// 获取新消息
 		eventBus.$on('sockBack', this.getWsResult);
 		this.getStatusList();
@@ -160,6 +169,11 @@ export default {
 		 * 表格检索开始
 		 * */
 		columnBack(val){
+			val.forEach(item=>{
+				if(item.prop === "business_status"){
+					item.data = this.setMap.statusList;
+				}
+			})
 			this.list.column = val;
 		},
 		async filterClick(item) {
@@ -180,12 +194,15 @@ export default {
 		filterParams(params){
 			let filterParams = Object.assign(this.params,params);
 			this.filterMap.data = filterParams;
+			this.upSearch();
 		},
-		tagClose(){
+		tagClose(params){
-
+			let filterParams = Object.assign(this.params,params);
+			this.filterMap.data = filterParams;
 		},
 		searchShowClick(){
 			this.searchShow = !this.searchShow;
+			eventBus.$emit('close-all-popovers');
 		},
 		getHeaderData(params){
 			this.params = params;
@@ -382,6 +399,7 @@ export default {
 			this.params = {};
 			this.filterMap.data = {};
 			this.$refs.scSearch.reload();
+			eventBus.$emit('reset-popovers');
 			this.$refs.table.reload();
 		},
 		handleSaveSuccess(){