no message
This commit is contained in:
parent
980175d348
commit
e41099397d
@ -8,82 +8,68 @@
|
|||||||
<el-button icon="el-icon-filter" @click="openFilter"></el-button>
|
<el-button icon="el-icon-filter" @click="openFilter"></el-button>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</slot>
|
</slot>
|
||||||
<el-dialog title="过滤器" v-model="dialog" :size="680" append-to-body class="filterBar">
|
<el-dialog title="过滤器" v-model="dialog" :size="680" append-to-body class="dialogClass">
|
||||||
<el-tabs class="root">
|
<el-scrollbar>
|
||||||
<el-tab-pane lazy>
|
<div class="sc-filter-main">
|
||||||
<template #label>
|
<h2>设置过滤条件</h2>
|
||||||
<div class="tabs-label">过滤项</div>
|
<div v-if="filter.length<=0" class="nodata">
|
||||||
</template>
|
没有默认过滤条件，请点击增加过滤项
|
||||||
<el-scrollbar>
|
</div>
|
||||||
<div class="sc-filter-main">
|
<table v-else>
|
||||||
<h2>设置过滤条件</h2>
|
<colgroup>
|
||||||
<div v-if="filter.length<=0" class="nodata">
|
<col width="30">
|
||||||
没有默认过滤条件，请点击增加过滤项
|
<col width="40">
|
||||||
</div>
|
<col width="140">
|
||||||
<table v-else>
|
<col>
|
||||||
<colgroup>
|
<col width="110">
|
||||||
<col width="30">
|
</colgroup>
|
||||||
<col width="40">
|
<tr v-for="(item,index) in filter" :key="index">
|
||||||
<col width="140">
|
<td>
|
||||||
<col>
|
<el-tag :disable-transitions="true">{{index+1}}</el-tag>
|
||||||
<col width="110">
|
</td>
|
||||||
</colgroup>
|
<td>
|
||||||
<tr v-for="(item,index) in filter" :key="index">
|
<el-icon class="del" @click="delFilter(index)" style="border: 1px solid #e6e6e6;">
|
||||||
<td>
|
<el-icon-delete />
|
||||||
<el-tag :disable-transitions="true">{{index+1}}</el-tag>
|
</el-icon>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<el-icon class="del" @click="delFilter(index)" style="border: 1px solid #e6e6e6;">
|
<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
|
||||||
<el-icon-delete />
|
</py-select>
|
||||||
</el-icon>
|
</td>
|
||||||
</td>
|
<td>
|
||||||
<td>
|
<el-input v-if="!item.field.type" v-model="item.value" placeholder="请选择过滤字段" disabled></el-input>
|
||||||
<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
|
<!-- 输入框 -->
|
||||||
</py-select>
|
<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder||'请输入'"></el-input>
|
||||||
</td>
|
<!-- 下拉框 -->
|
||||||
<td>
|
<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder||'请选择'" filterable :multiple="item.field.options.multiple" :loading="item.selectLoading" @visible-change="visibleChange($event, item)" @change="selectChange(item)" :remote="item.field.options.remote" :remote-method="(query)=>{remoteMethod(query, item)}">
|
||||||
<el-input v-if="!item.field.type" v-model="item.value" placeholder="请选择过滤字段" disabled></el-input>
|
<el-option v-for="field in item.field.options.items" :key="field.value" :label="field.label || field.name" :value="field.value"></el-option>
|
||||||
<!-- 输入框 -->
|
</el-select>
|
||||||
<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder||'请输入'"></el-input>
|
<!-- 日期 -->
|
||||||
<!-- 下拉框 -->
|
<el-date-picker v-if="item.field.type=='date'" v-model="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
|
||||||
<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder||'请选择'" filterable :multiple="item.field.options.multiple" :loading="item.selectLoading" @visible-change="visibleChange($event, item)" @change="selectChange(item)" :remote="item.field.options.remote" :remote-method="(query)=>{remoteMethod(query, item)}">
|
<!-- 日期范围 -->
|
||||||
<el-option v-for="field in item.field.options.items" :key="field.value" :label="field.label || field.name" :value="field.value"></el-option>
|
<el-date-picker v-if="item.field.type=='daterange'" v-model="item.value" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
||||||
</el-select>
|
<!-- 日期时间 -->
|
||||||
<!-- 日期 -->
|
<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
|
||||||
<el-date-picker v-if="item.field.type=='date'" v-model="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
|
<!-- 日期时间范围 -->
|
||||||
<!-- 日期范围 -->
|
<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
||||||
<el-date-picker v-if="item.field.type=='daterange'" v-model="item.value" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
<!-- 自定义日期 -->
|
||||||
<!-- 日期时间 -->
|
<el-date-picker v-if="item.field.type=='customDate'" v-model="item.value" :type="item.field.options.dateType||'date'" :value-format="item.field.options.valueFormat" :placeholder="item.field.placeholder||'请选择'" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
||||||
<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
|
<!-- 开关 -->
|
||||||
<!-- 日期时间范围 -->
|
<el-switch v-if="item.field.type=='switch'" v-model="item.value" active-value="1" inactive-value="0"></el-switch>
|
||||||
<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
<!-- 标签 -->
|
||||||
<!-- 自定义日期 -->
|
<el-select v-if="item.field.type=='tags'" v-model="item.value" multiple filterable allow-create default-first-option no-data-text="输入关键词后按回车确认" :placeholder="item.field.placeholder||'请输入'"></el-select>
|
||||||
<el-date-picker v-if="item.field.type=='customDate'" v-model="item.value" :type="item.field.options.dateType||'date'" :value-format="item.field.options.valueFormat" :placeholder="item.field.placeholder||'请选择'" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
</td>
|
||||||
<!-- 开关 -->
|
<td v-if="item.field.operators">
|
||||||
<el-switch v-if="item.field.type=='switch'" v-model="item.value" active-value="1" inactive-value="0"></el-switch>
|
<el-select v-model="item.operator" placeholder="运算符">
|
||||||
<!-- 标签 -->
|
<el-option v-for="ope in item.field.operators || operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
|
||||||
<el-select v-if="item.field.type=='tags'" v-model="item.value" multiple filterable allow-create default-first-option no-data-text="输入关键词后按回车确认" :placeholder="item.field.placeholder||'请输入'"></el-select>
|
</el-select>
|
||||||
</td>
|
</td>
|
||||||
<td v-if="item.field.operators">
|
</tr>
|
||||||
<el-select v-model="item.operator" placeholder="运算符">
|
</table>
|
||||||
<el-option v-for="ope in item.field.operators || operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
|
<el-button type="primary" text icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
|
||||||
</el-select>
|
</div>
|
||||||
</td>
|
<my ref="my" :data="myFilter" :filterName="filterName" @selectMyfilter="selectMyfilter"></my>
|
||||||
</tr>
|
</el-scrollbar>
|
||||||
</table>
|
|
||||||
<el-button type="primary" text icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane lazy>
|
|
||||||
<template #label>
|
|
||||||
<div class="tabs-label">常用</div>
|
|
||||||
</template>
|
|
||||||
<el-scrollbar>
|
|
||||||
<my ref="my" :data="myFilter" :filterName="filterName" @selectMyfilter="selectMyfilter"></my>
|
|
||||||
</el-scrollbar>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button type="primary" @click="ok" :disabled="filter.length<=0">立即过滤</el-button>
|
<el-button type="primary" @click="ok" :disabled="filter.length<=0">立即过滤</el-button>
|
||||||
@ -95,18 +81,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style>
|
||||||
.tabs-label {padding:0 20px;}
|
.tabs-label {padding:0 20px;}
|
||||||
|
|
||||||
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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;}
|
.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: 20px}
|
.sc-filter-main {background: #fff; padding-top: 0px}
|
||||||
.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
|
.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 {width: 100%;margin: 10px 0;}
|
||||||
.sc-filter-main table tr {}
|
.sc-filter-main table tr {}
|
||||||
|
|||||||
@ -4,28 +4,17 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sc-filter-my">
|
<div class="sc-filter-my">
|
||||||
<div v-if="loading" class="sc-filter-my-loading">
|
<el-tag v-for="(item, index) in myFilter" @close="closeMyfilter(item, index)" @click="selectMyfilter(item)" :key="index" class="mx-1" style="margin-right: 10px;" closable :type="item.type">
|
||||||
<el-skeleton :rows="2" animated />
|
{{ item.title }}
|
||||||
</div>
|
</el-tag>
|
||||||
<template v-else>
|
<!-- <li v-for="(item, index) in myFilter" :key="index" @click="selectMyfilter(item)">
|
||||||
<el-empty v-if="myFilter.length<=0" :image-size="100">
|
|
||||||
<template #description>
|
|
||||||
<h2>没有常用的过滤</h2>
|
|
||||||
<p style="margin-top: 10px;max-width: 300px;">常用过滤可以将多个过滤条件保存为一个集合，方便下次进行相同条件的过滤</p>
|
|
||||||
</template>
|
|
||||||
</el-empty>
|
|
||||||
<ul v-else class="sc-filter-my-list">
|
|
||||||
<h2>我的常用过滤</h2>
|
|
||||||
<li v-for="(item, index) in myFilter" :key="index" @click="selectMyfilter(item)">
|
|
||||||
<label>{{item.title}}</label>
|
<label>{{item.title}}</label>
|
||||||
<el-popconfirm title="确认删除此常用过滤吗？" @confirm="closeMyfilter(item, index)">
|
<el-popconfirm title="确认删除此常用过滤吗？" @confirm="closeMyfilter(item, index)">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-icon class="del" @click.stop="()=>{}"><el-icon-delete /></el-icon>
|
<el-icon class="del" @click.stop="()=>{}"><el-icon-delete /></el-icon>
|
||||||
</template>
|
</template>
|
||||||
</el-popconfirm>
|
</el-popconfirm>
|
||||||
</li>
|
</li> -->
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user