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> <el-input v-model="item.width" placeholder="auto" size="small"></el-input>
</span> </span>
<span class="type_b"> <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> </el-select>
</span> </span>
<span class="sortable_b"> <span class="sortable_b">
@ -65,6 +62,22 @@
}, },
data() { data() {
return { 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, isSave: false,
usercolumn: JSON.parse(JSON.stringify(this.column||[])) usercolumn: JSON.parse(JSON.stringify(this.column||[]))
} }

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

@ -1,22 +1,22 @@
<template> <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> <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> <scDatePicker :size="size" v-model:activation_date="params[item.prop]" @change="changeData" @visible-change="getSelect(item,$event)" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
</div> </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> <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> <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> <el-option v-for="em in item.data" :key="em" :label="em.label" :value="em.value || em.id"></el-option>
</scMultipleSelect> </scMultipleSelect>
</div> </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> <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-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-option v-for="em in item.data" :key="em" :label="em.label " :value="em[item.code[0]] || em.active_status"></el-option>
</el-select> </el-select>
</div> </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> <label class="name">{{item.label}}</label>
<div> <div>
<scVgInput class="input" v-model:activation_text="params[item.prop]" @fetchData="getText(item,$event)" :placeholder="'请输入'+item.label" :size="size"></scVgInput> <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:{ searchList:{
handler(val){ handler(val){
if(val && val.length>0){ 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); this.params = this.groupByType(val);
} }
}, },
@ -92,6 +93,8 @@ export default {
}, },
getText(item){ getText(item){
this.$emit('fetchSelectData',{data:item,params:this.params}); this.$emit('fetchSelectData',{data:item,params:this.params});
},
hidePopover(){
eventBus.$emit('close-all-popovers'); eventBus.$emit('close-all-popovers');
}, },
reload(){ reload(){

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

@ -1,51 +1,54 @@
<template> <template>
<div class="popoverBox"> <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 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>
<span class="name">{{ column.label }}</span> <el-icon class="sc-trend-icon"><sc-icon-Filter /></el-icon>
<el-icon class="sc-trend-icon"><sc-icon-Filter /></el-icon> </span>
</span> <span v-else class="label name" @click.stop>
<span v-else class="label name" @click.stop> {{ column.label }}
{{ column.label }} </span>
</span> </div>
</template>
<!-- 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>
</div>
<!-- date 单个日期-->
<div v-else-if="column.search_type == 'date'" @click.stop>
<el-date-picker v-model="filterValue" type="date" placeholder="选择日期" :size="size" format="YYYY-MM-DD" @clear="filterClear" />
</div>
<!-- datetime 日期时间-->
<div v-else-if="column.search_type == 'datetime'" @click.stop>
<el-date-picker v-model="filterValue" type="datetime" :size="size" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss" @clear="filterClear" />
</div>
<!-- date_range 日期范围-->
<div v-else-if="column.search_type == 'date_range'" @click.stop>
<el-date-picker v-model="filterValue" type="daterange" :size="size" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="dateChange"></el-date-picker>
</div>
<!-- select 下拉选择--> <div class="customPopperView" v-if="visible">
<div v-else-if="column.search_type == 'select'" @click.stop> <el-popover :visible="visible" placement="bottom-end" :virtual-ref="buttonRef" virtual-triggering :ref="`popover-${columnIndex}`" popper-class="customPopper">
<el-select v-model="filterValue" placeholder="请选择" style="width: 100%" :size="size" clearable filterable filter @clear="filterClear" @visible-change="visibleChange(column,$event)"> <!-- text 文本 -->
<el-option v-for="(item, index) in column && column.data" :key="index" :label="item.label" :value="item.id"></el-option> <div v-if="column.search_type == 'text'" @click.stop>
</el-select> <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" :size="size" clearable v-model="filterValue" placeholder="请输入查询内容" @clear="filterClear"></el-input>
</div> </div>
<!-- date 单个日期-->
<div v-else-if="column.search_type == 'date'" @click.stop>
<el-date-picker v-model="filterValue" type="date" placeholder="选择日期" :size="size" format="YYYY-MM-DD" @clear="filterClear" />
</div>
<!-- datetime 日期时间-->
<div v-else-if="column.search_type == 'datetime'" @click.stop>
<el-date-picker v-model="filterValue" type="datetime" :size="size" placeholder="选择日期时间" format="YYYY-MM-DD HH:mm:ss" @clear="filterClear" />
</div>
<!-- date_range 日期范围-->
<div v-else-if="column.search_type == 'date_range'" @click.stop>
<el-date-picker v-model="filterValue" type="daterange" :size="size" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="dateChange"></el-date-picker>
</div>
<!-- select 多选下拉选择--> <!-- select 下拉选择-->
<div v-else-if="column.search_type == 'checkbox'" @click.stop> <div v-else-if="column.search_type == 'select'" @click.stop>
<el-select v-model="filterValue" placeholder="请选择" style="width: 100%" :size="size" clearable filterable filter multiple collapse-tags @clear="filterClear" @visible-change="visibleChange(column,$event)"> <el-select v-model="filterValue" placeholder="请选择" style="width: 100%" :size="size" clearable filterable filter @clear="filterClear" @visible-change="visibleChange(column,$event)">
<el-option v-for="(item, index) in column && column.data" :key="index" :label="item.label" :value="item.value || item.id"></el-option> <el-option v-for="(item, index) in column && column.data" :key="index" :label="item.label" :value="item.id"></el-option>
</el-select> </el-select>
</div> </div>
<div style="text-align: right;display: flex;justify-content: flex-end;"> <!-- select 多选下拉选择-->
<el-button class="confirm" :size="size" @click="closeVisible">取消</el-button> <div v-else-if="column.search_type == 'checkbox'" @click.stop>
<el-button @click="confirm()" type="primary" :size="size" class="confirm">确定</el-button> <el-select v-model="filterValue" placeholder="请选择" style="width: 100%" :size="size" clearable filterable filter multiple collapse-tags @clear="filterClear" @visible-change="visibleChange(column,$event)">
</div> <el-option v-for="(item, index) in column && column.data" :key="index" :label="item.label" :value="item.value || item.id"></el-option>
</el-popover> </el-select>
</div>
<div style="text-align: right;display: flex;justify-content: flex-end;">
<el-button class="confirm" :size="size" @click="closeVisible">取消</el-button>
<el-button @click="confirm()" type="primary" :size="size" class="confirm">确定</el-button>
</div>
</el-popover>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -56,8 +59,12 @@ import { inject } from "vue";
import {eventBus} from "@/utils/eventBus" import {eventBus} from "@/utils/eventBus"
export default { export default {
name: 'typePopover', name: 'typePopover',
directives: {
},
data() { data() {
return { return {
buttonRef:{},
visible: false, visible: false,
size: 'small', size: 'small',
checkedColumn: {}, checkedColumn: {},
@ -101,6 +108,7 @@ export default {
eventBus.$emit('close-all-popovers'); eventBus.$emit('close-all-popovers');
this.visible = !wasVisible; this.visible = !wasVisible;
if (this.visible) { if (this.visible) {
this.buttonRef = this.$refs.buttonRef;
this.checkedColumn = column; this.checkedColumn = column;
if (this.filterModelParams && this.filterModelParams.data && this.filterModelParams.data[column.prop]) { if (this.filterModelParams && this.filterModelParams.data && this.filterModelParams.data[column.prop]) {
switch (column.search_type){ switch (column.search_type){
@ -155,15 +163,9 @@ export default {
}, },
closeVisible(){ closeVisible(){
this.visible = false; this.visible = false;
// this.$nextTick(()=>{
// this.$refs['popover-'+this.columnIndex].hide();
// })
}, },
closePopover() { closePopover() {
this.visible = false; this.visible = false;
// this.$nextTick(()=>{
// this.$refs['popover-'+this.columnIndex].hide();
// })
}, },
/** 日期清空的处理 */ /** 日期清空的处理 */
dateChange(val) { dateChange(val) {
@ -179,20 +181,25 @@ export default {
} }
switch (this.checkedColumn.search_type){ switch (this.checkedColumn.search_type){
case 'text': case 'text':
params.value = this.filterValue?this.checkedColumn.condition==="="?this.filterValue:'%'+this.filterValue+'%':"" params.value = ""
break; break;
case 'date_range': 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; break;
default: default:
params.value = this.filterValue; params.value = "";
break break
} }
this.filterTagClose(params); this.filterValue = "";
this.filterTagClose({[this.checkedColumn.prop]:params});
}, },
/** 重置输入框值 */ /** 重置输入框值 */
resetFilter(){ resetFilter(){
this.filterValue = ""; this.filterValue = "";
this.visible = false;
} }
}, },
} }
@ -202,6 +209,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
position: relative;
.handlerView{
width: 100%;
}
.label{ .label{
width: 100%; width: 100%;
.el-icon{ .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){ tool.formatStartTime = function(time){
let date = new Date(time); let date = new Date(time);
date.setHours(0); date.setHours(0,0,0);
return Math.floor(date.getTime() / 1000) return Math.floor(date.getTime() / 1000)
} }
/* 转时间戳 结束时间 */ /* 转时间戳 结束时间 */
tool.formatEndTime = function(time){ tool.formatEndTime = function(time){
let date = new Date(time); let date = new Date(time);
date.setHours(23); date.setHours(23,59,59);
return Math.floor(date.getTime() / 1000) return Math.floor(date.getTime() / 1000)
} }
/* 时间戳转日期 开始 */ /* 时间戳转日期 开始 */
tool.getStartTime = function (time){ tool.getStartTime = function (time){
let date = new Date(time * 1000); 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'); return tool.dateFormat(date,'yyyy-MM-dd');
} }
/* 时间戳转日期 结束 */ /* 时间戳转日期 结束 */
tool.getEndTime = function(time){ tool.getEndTime = function(time){
let date = new Date(time * 1000); 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'); return tool.dateFormat(date,'yyyy-MM-dd');
} }

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

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