longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化表头检索组件

Browse Source
This commit is contained in:
龙运模 2024-12-19 14:22:39 +08:00
parent 377702dc12
commit 19a63d9408
5 changed files with 120 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/scTable/columnSetting.vue
View File

@ -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-option value="link"></el-option>
<el-option value="in"></el-option>
<el-option value="between"></el-option>
<el-option value="="></el-option>
<el-select v-model="item.condition" size="small" disabled>
<el-option :value="item.value" :label="item.label" v-for="(item,index) in conditionList" :key="index"></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||[]))
}

15
src/components/scTable/components/headerSearch.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="headerSearch" v-for="(item,index) in columnList" :key="item">
<div class="searchItem" v-if="item.search_type == 'date_range' && (searchShow || (!searchShow && index<4)) && !item.hide">
<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 && 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(){

37
src/components/scTable/components/typePopover.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="popoverBox">
<el-popover :visible="visible" placement="bottom-end" :ref="`popover-${columnIndex}`" popper-class="customPopper">
<template #reference>
<div class="handlerView" ref="buttonRef">
<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{

12
src/utils/tool.js
View File

@ -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);
tool.dateFormat(date,'yyyy-MM-dd');
// return date.toISOString();
date.setHours(0,0,0);
return tool.dateFormat(date,'yyyy-MM-dd');
}
/* 时间戳转日期 结束 */
tool.getEndTime = function(time){
let date = new Date(time * 1000);
date.setHours(23);
tool.dateFormat(date,'yyyy-MM-dd');
// return date.toISOString()
date.setHours(23,59,59);
return tool.dateFormat(date,'yyyy-MM-dd');
}

32
src/views/order/orderList/index.vue
View File

@ -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(){