筛选
This commit is contained in:
parent
b132b49ef2
commit
f8e1ecd488
@ -34,23 +34,24 @@
|
||||
</colgroup>
|
||||
<tr v-for="(item,index) in filter" :key="index">
|
||||
<td>
|
||||
<el-tag :disable-transitions="true">{{index+1}}</el-tag>
|
||||
<el-tag :disable-transitions="true" type="info">{{index+1}}</el-tag>
|
||||
</td>
|
||||
<td>
|
||||
<el-icon v-if="!item.field.selected" class="del" @click="delFilter(index, item)" style="border: 1px solid #e6e6e6;">
|
||||
<el-icon v-if="!item.selected" class="del" @click="delFilter(index, item)" style="border: 1px solid #e6e6e6;">
|
||||
<el-icon-delete />
|
||||
</el-icon>
|
||||
</td>
|
||||
<td>
|
||||
<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
|
||||
</py-select>
|
||||
<el-select v-model="item.value" @change="fieldChange(item, index)" :disabled="item.selected">
|
||||
<el-option v-for="field in optionsList" :key="field.name" :label="field.label" :value="field.name" :disabled="isDisabled(field.name)"> </el-option>
|
||||
</el-select>
|
||||
</td>
|
||||
<td>
|
||||
<x-item v-model="data" :item="item.field"></x-item>
|
||||
<x-item v-model="data" :item="item"></x-item>
|
||||
</td>
|
||||
<td v-if="item.field.operators">
|
||||
<el-select v-model="item.field.operator" placeholder="运算符">
|
||||
<el-option v-for="ope in item.field.operators || operator" :key="ope.value" v-bind="ope"></el-option>
|
||||
<td v-if="item.operators">
|
||||
<el-select v-model="item.operator" placeholder="运算符">
|
||||
<el-option v-for="ope in item.operators || operator" :key="ope.value" v-bind="ope"></el-option>
|
||||
</el-select>
|
||||
</td>
|
||||
</tr>
|
||||
@ -69,54 +70,13 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.tabs-label {padding:0 20px;}
|
||||
|
||||
.dialogClass .el-dialog__body {
|
||||
margin: 10px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
.dialogClass .el-dialog__footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
|
||||
|
||||
.sc-filter-main {background: #fff; padding-top: 0px}
|
||||
.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
|
||||
.sc-filter-main table {width: 100%;margin: 10px 0;}
|
||||
.sc-filter-main table tr {}
|
||||
.sc-filter-main table td {padding:5px 10px 5px 0;}
|
||||
.sc-filter-main table td:deep(.el-input .el-input__inner) {vertical-align: top;}
|
||||
.sc-filter-main table td .el-select {display: block;}
|
||||
.sc-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
|
||||
.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
|
||||
.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
|
||||
|
||||
.root {display: flex;height: 100%;flex-direction: column}
|
||||
.root:deep(.el-tabs__header) {margin: 0;}
|
||||
.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
|
||||
.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
|
||||
|
||||
|
||||
|
||||
.dark .root:deep(.el-tabs__content) {background: var(--el-bg-color-overlay);}
|
||||
.dark .sc-filter-main {background: var(--el-bg-color);border-color:var(--el-border-color-light);}
|
||||
.dark .sc-filter-main table td .del {background: none;}
|
||||
.dark .sc-filter-main table td .del:hover {background: #F56C6C;}
|
||||
.dark .nodata {border-color:var(--el-border-color-light);}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import config from "@/config/filterBar"
|
||||
import pySelect from './pySelect'
|
||||
import my from './my'
|
||||
|
||||
export default {
|
||||
name: 'filterBar',
|
||||
components: {
|
||||
pySelect,
|
||||
my
|
||||
},
|
||||
props: {
|
||||
@ -134,9 +94,11 @@
|
||||
myFilter: [],
|
||||
fieldTop: [],
|
||||
defaultValue: Object.assign({}, this.modelValue),
|
||||
defaultField: [].concat(this.options),
|
||||
filterObjLength: 0,
|
||||
saveLoading: false,
|
||||
data: this.modelValue,
|
||||
optionsList: [],
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
@ -148,14 +110,17 @@
|
||||
filterObj(){
|
||||
const obj = {}
|
||||
this.filter.forEach((item) => {
|
||||
if (!this.data[item.field.name] || this.data[item.field.name] == '') {
|
||||
if (!this.data[item.name] || this.data[item.name] == '') {
|
||||
return; // 跳过当前迭代，继续下一次迭代
|
||||
}
|
||||
obj[item.field.name] = item.field.operator ? this.data[item.field.name]+`${config.separator}${item.field.operator}` : this.data[item.field.name]
|
||||
if (item.options && item.options.items && item.options.items.length>0) {
|
||||
const foundItem = item.options.items.find(o => o.value === this.data[item.name]);
|
||||
if (foundItem?.operator) {
|
||||
item.operator = foundItem.operator;
|
||||
}
|
||||
}
|
||||
obj[item.name] = item.operator ? this.data[item.name]+`${config.separator}${item.operator}` : this.data[item.name]
|
||||
})
|
||||
|
||||
console.log(obj, this.defaultValue, this.data)
|
||||
|
||||
return obj
|
||||
}
|
||||
},
|
||||
@ -164,13 +129,24 @@
|
||||
this.fields.forEach((item) => {
|
||||
if(item.selected){
|
||||
this.fieldTop.push(item)
|
||||
this.filter.push({
|
||||
field: item,
|
||||
})
|
||||
item.value = item.name;
|
||||
this.filter.push(item)
|
||||
}
|
||||
})
|
||||
this.optionsList = [].concat(this.fields);
|
||||
},
|
||||
methods: {
|
||||
fieldChange(o, index){
|
||||
const foundObject = this.defaultField.find(obj => obj.name === o.value);
|
||||
this.data[o.name] = '';
|
||||
this.filter[index] = Object.assign(foundObject, {value:o.value});
|
||||
},
|
||||
isDisabled(key){
|
||||
if(this.filter.some(item => item.name === key && !item.repeat)){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
//打开过滤器
|
||||
openFilter(){
|
||||
this.dialog = true
|
||||
@ -178,24 +154,19 @@
|
||||
//增加过滤项
|
||||
addFilter(){
|
||||
//下一组新增过滤
|
||||
var filterArr = this.fields.filter(field => !this.filter.some(item => field.name == item.field.name && !item.field.repeat))
|
||||
var filterArr = this.fields.filter(field => !this.filter.some(item => field.name == item.name && !item.repeat))
|
||||
if(this.fields.length<=0 || filterArr.length<=0){
|
||||
this.$message.warning('无过滤项了');
|
||||
return false
|
||||
}
|
||||
const filterNum = filterArr[0]
|
||||
this.filter.push({
|
||||
field: filterNum,
|
||||
})
|
||||
filterNum.value = filterNum.name;
|
||||
this.filter.push(filterNum)
|
||||
},
|
||||
//删除过滤项
|
||||
delFilter(index, o){
|
||||
this.filter.splice(index, 1)
|
||||
this.data[o.field.name] = '';
|
||||
},
|
||||
//过滤项字段变更事件
|
||||
fieldChange(tr){
|
||||
console.log(tr)
|
||||
this.data[o.name] = '';
|
||||
},
|
||||
//立即过滤
|
||||
ok(){
|
||||
@ -218,18 +189,16 @@
|
||||
this.fields.forEach((field) => {
|
||||
var filterValue = item.filterObj[field.value]
|
||||
if(filterValue){
|
||||
var operator = filterValue.split("|")[1]
|
||||
field.operator = filterValue.split("|")[1]
|
||||
var value = filterValue.split("|")[0]
|
||||
if(field.component=='select' && field.options.multiple){
|
||||
value = value.split(",")
|
||||
}else if(field.component=='daterange'){
|
||||
value = value.split(",")
|
||||
}
|
||||
this.filter.push({
|
||||
field: field,
|
||||
operator: operator,
|
||||
value: value
|
||||
})
|
||||
|
||||
this.data[field.name] = value;
|
||||
this.filter.push(field)
|
||||
}
|
||||
})
|
||||
this.filterObjLength = Object.keys(item.filterObj).length
|
||||
@ -271,3 +240,39 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tabs-label {padding:0 20px;}
|
||||
|
||||
.dialogClass .el-dialog__body {
|
||||
margin: 10px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
.dialogClass .el-dialog__footer {
|
||||
text-align: right;
|
||||
}
|
||||
.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
|
||||
.sc-filter-main {background: #fff; padding-top: 0px}
|
||||
.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
|
||||
.sc-filter-main table {width: 100%;margin: 10px 0;}
|
||||
.sc-filter-main table tr {}
|
||||
.sc-filter-main table td {padding:5px 10px 5px 0;}
|
||||
.sc-filter-main table td:deep(.el-input .el-input__inner) {vertical-align: top;}
|
||||
.sc-filter-main table td .el-select {display: block;}
|
||||
.sc-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
|
||||
.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
|
||||
.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
|
||||
|
||||
.root {display: flex;height: 100%;flex-direction: column}
|
||||
.root:deep(.el-tabs__header) {margin: 0;}
|
||||
.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
|
||||
.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
|
||||
|
||||
|
||||
|
||||
.dark .root:deep(.el-tabs__content) {background: var(--el-bg-color-overlay);}
|
||||
.dark .sc-filter-main {background: var(--el-bg-color);border-color:var(--el-border-color-light);}
|
||||
.dark .sc-filter-main table td .del {background: none;}
|
||||
.dark .sc-filter-main table td .del:hover {background: #F56C6C;}
|
||||
.dark .nodata {border-color:var(--el-border-color-light);}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,54 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: 二次封装el-select 支持拼音
|
||||
* @version: 1.0
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-select ref="select" v-bind="$attrs" :filter-method="filterMethod" @visible-change="visibleChange" :disabled="$attrs.modelValue.selected">
|
||||
<el-option v-for="field in optionsList" :key="field.name" :label="field" :value="field" :disabled="isDisabled(field.name)"> </el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pinyin from './pinyin'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
options: { type: Array, default: () => [] },
|
||||
filter: { type: Array, default: () => [] }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
optionsList: [],
|
||||
optionsList_: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.optionsList = this.options
|
||||
this.optionsList_ = [...this.options]
|
||||
},
|
||||
methods: {
|
||||
filterMethod(keyword){
|
||||
if(keyword){
|
||||
this.optionsList = this.optionsList_
|
||||
this.optionsList = this.optionsList.filter((item) =>
|
||||
pinyin.match(item.label, keyword)
|
||||
);
|
||||
}else{
|
||||
this.optionsList = this.optionsList_
|
||||
}
|
||||
},
|
||||
visibleChange(isopen){
|
||||
if(isopen){
|
||||
this.optionsList = this.optionsList_
|
||||
}
|
||||
},
|
||||
isDisabled(key){
|
||||
if(this.filter.find(item => item.field.name == key && !item.field.repeat)){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user