Update filterbar2.vue

This commit is contained in:
sakuya 2021-07-31 00:06:59 +08:00
parent b5ba3c41c2
commit 0a57f08fc2
1 changed files with 160 additions and 32 deletions

View File

@ -14,56 +14,85 @@
<el-button size="small" icon="sc-icon-filter-line" @click="openFilter"></el-button>
</el-badge>
<el-drawer title="过滤器" v-model="drawer" :size="500">
<el-drawer title="过滤器" v-model="drawer" :size="650">
<el-container>
<el-main style="padding:0">
<el-tabs class="root">
<el-tab-pane>
<template #label>
<i class="el-icon-s-operation"></i> 过滤项
<div class="tabs-label">
过滤项
</div>
</template>
<el-scrollbar>
<el-form :model="form" class="filterForm">
<p style="margin-bottom: 15px;">过滤项</p>
<el-form-item>
<el-tag size="d">1</el-tag>
<el-select v-model="form.region" placeholder="活动区域" filterable>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
<el-input v-model="form.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item>
<el-tag size="d">2</el-tag>
<el-select v-model="form.region" placeholder="活动区域" filterable>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
<el-input v-model="form.user" placeholder="审批人"></el-input>
</el-form-item>
<div class="sc-filter-main">
<h2>设置过滤条件</h2>
</el-form>
<el-alert v-if="filter.length<=0" title="没有默认过滤条件,请点击增加过滤项" type="warning" :closable="false" center style="margin:15px 0;"></el-alert>
<el-button type="text" icon="el-icon-plus">增加过滤项</el-button>
<table v-else>
<colgroup>
<col width="50">
<col width="140">
<col>
<col width="40">
</colgroup>
<tr v-for="(item,index) in filter" :key="index">
<td>
<el-tag size="medium">{{index+1}}</el-tag>
</td>
<td>
<el-select v-model="item.field" placeholder="过滤字段" filterable @change="fieldChange(item)">
<el-option v-for="field in fields" :key="field.value" :label="field.label" :value="field"></el-option>
</el-select>
</td>
<td>
<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder"></el-input>
<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder" filterable :multiple="item.field.extend.multiple">
<el-option v-for="field in item.field.extend.data" :key="field.value" :label="field.label" :value="field.value"></el-option>
</el-select>
<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" :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" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
<el-switch v-if="item.field.type=='switch'" v-model="item.value"></el-switch>
</td>
<td>
<i class="el-icon-delete del" @click="delFilter(index)"></i>
</td>
</tr>
</table>
<el-button type="text" icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
</div>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane>
<template #label>
<i class="el-icon-star-on"></i> 常用
<div class="tabs-label">
常用
</div>
</template>
<el-scrollbar>
<el-tag closable size="d">默认标签</el-tag>
<ul class="sc-filter-my">
<li><label>已过期的用户</label></li>
<li><label>类型为正常且已缴费的用户</label></li>
</ul>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</el-main>
<el-footer>
<el-button type="primary">立即过滤</el-button>
<el-button type="primary" plain>保存常用</el-button>
<el-button type="primary" @click="ok">立即过滤</el-button>
<el-button type="primary" plain @click="savemy">保存常用</el-button>
<el-button>重置</el-button>
</el-footer>
</el-container>
@ -82,26 +111,125 @@
form: {
checkboxGroup1: ['1'],
radio1: ''
}
},
fields: [
{
label: 'ID',
value: 'id',
type: 'text',
selected: true,
placeholder: '请输入ID'
},
{
label: '姓名',
value: 'name',
type: 'text',
placeholder: '请输入姓名'
},
{
label: '类型',
value: 'type',
type: 'select',
selected: true,
placeholder: '请选择类型',
extend: {
//multiple: true,
data: [
{
label: "选项1",
value: "1"
},
{
label: "选项2",
value: "2"
}
]
}
},
{
label: '注册日期',
value: 'date',
type: 'datetime',
placeholder: '请选择日期时间'
},
{
label: '有效期',
value: 'date2',
type: 'datetimerange',
placeholder: '请选择日期时间'
},
{
label: '是否警用',
value: 'switch',
type: 'switch'
}
],
filter: []
}
},
mounted() {
//
this.fields.forEach((item) => {
if(item.selected){
this.filter.push({
field: item,
value: ''
})
}
})
},
methods: {
openFilter(){
this.drawer = true
},
addFilter(){
this.filter.push({
field: this.fields[0],
value: ''
})
},
delFilter(index){
console.log(index)
this.filter.splice(index, 1)
},
ok(){
console.log(this.filter);
},
fieldChange(tr){
tr.value = ''
},
savemy(){
this.$prompt('请输入常用过滤名称', '提示', {
inputPlaceholder: '请输入常用过滤名称'
})
.then(({ value }) => {
console.log(value);
})
.catch(() => {
//
})
}
}
}
</script>
<style scoped>
.tabs-label {padding:0 20px;}
.filterForm {padding:20px;}
.filterForm:deep(.el-form-item__content) {display: flex;width: 100%;}
.sc-filter-main {padding:20px;border-bottom: 1px solid #e6e6e6;background: #fff;}
.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
.sc-filter-main table {width: 100%;margin: 15px 0;}
.sc-filter-main table tr {}
.sc-filter-main table td {padding:5px 10px 5px 0;}
.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;}
.sc-filter-my {list-style-type: none;padding:15px;}
.sc-filter-my li {font-size: 12px;margin-bottom: 15px;}
.sc-filter-my li label {background: #222b45;color: #fff;padding:5px 10px;border-radius:4px;}
.sc-filter-my li:hover {box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);position: relative;}
.root {
display: flex;
@ -109,6 +237,6 @@
flex-direction: column
}
.root:deep(.el-tabs__header) {margin: 0;}
.root:deep(.el-tabs__content) {flex: 1;}
.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
</style>