/**
|
* CFilter - 页面筛选
|
* @author Tevin
|
*/
|
|
<template>
|
<view
|
class="c-filter"
|
ref="filter"
|
>
|
<view
|
class="c-filter-bar"
|
v-if="bar"
|
>
|
<CFilterSelect
|
v-if="bar.type==='select'"
|
type="bar"
|
:label="bar.label"
|
:options="selectOptions[bar.name] || []"
|
:cancelable="bar.cancelable"
|
:value="filterRes[bar.name]"
|
:onChange="evt=>handleBarChange(bar.name, evt)"
|
/>
|
<CFilterDateRange
|
v-if="bar.type==='dateRange'"
|
type="bar"
|
:label="bar.label"
|
:value="filterRes[bar.name]"
|
:onChange="evt=>handleBarChange(bar.name, evt)"
|
/>
|
</view>
|
<view
|
class="c-filter-more"
|
:class="itemsFilled?'on':''"
|
v-if="items && items.length > 0"
|
@tap="evt => handleOpen()"
|
>
|
<text>更多筛选 </text>
|
<text class="arrow">»</text>
|
</view>
|
<CDrawer
|
class="c-filter-drawer"
|
:show="drawerShow"
|
:onClose="evt => handleFinish()"
|
>
|
<scroll-view
|
class="c-filter-drawer-list"
|
:scrollY="true"
|
>
|
<view
|
class="box"
|
v-for="(item,index) in items"
|
:key="index"
|
>
|
<CFilterSelect
|
v-if="item.type==='select'"
|
type="item"
|
:label="item.label"
|
:options="selectOptions[item.name] || []"
|
:value="filterRes[item.name]"
|
:onChange="evt=>handleItemChange(item.name, evt)"
|
/>
|
<CFilterDateRange
|
v-if="item.type==='dateRange'"
|
type="item"
|
:label="item.label"
|
:value="filterRes[item.name]"
|
:onChange="evt=>handleItemChange(item.name, evt)"
|
/>
|
</view>
|
</scroll-view>
|
<view class="c-filter-drawer-btn">
|
<AtButton
|
type="primary"
|
:circle="false"
|
:onClick="evt => handleClean()"
|
>重置</AtButton>
|
<AtButton
|
type="primary"
|
:circle="false"
|
:onClick="evt => handleFinish()"
|
>完成</AtButton>
|
</view>
|
</CDrawer>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import { $ } from '@tarojs/extend';
|
import { AtDrawer, AtButton } from 'taro-ui-vue';
|
import { CDrawer } from '@components/layout/drawer';
|
import CFilterSelect from './CFilterSelect';
|
import CFilterDateRange from './CFilterDateRange';
|
import './cFilter.scss';
|
|
export default {
|
name: 'CFilter',
|
components: {
|
AtDrawer,
|
AtButton,
|
CFilterSelect,
|
CFilterDateRange,
|
CDrawer,
|
},
|
props: {
|
filterData: { type: Object, default: () => {} },
|
// 筛选横条项目
|
bar: { type: Object, default: () => {} },
|
// 筛选展开层项目列表
|
items: { type: Array, default: () => [] },
|
// 各个项目的选项列表
|
selectOptions: { type: Object, default: () => {} },
|
// 筛选变化时的回调
|
onChange: Function,
|
},
|
data() {
|
return {
|
filterRes: this.filterData || {},
|
// 抽屉显示隐藏
|
drawerShow: false,
|
// 面板项有已选
|
itemsFilled: false,
|
// 本次打开是否有改变
|
itemsChanged: false,
|
};
|
},
|
methods: {
|
handleOpen() {
|
this.drawerShow = true;
|
},
|
handleBarChange(name, value) {
|
this.$set(this.filterRes, name, value);
|
this.onChange(this.filterRes);
|
},
|
handleItemChange(name, value) {
|
this.$set(this.filterRes, name, value);
|
this.itemsChanged = true;
|
// 如果变化值不为空
|
if (typeof value !== 'undefined') {
|
this.itemsFilled = true;
|
}
|
// 为空是检查所有面板值是否为空
|
else {
|
let valuehas = false;
|
for (let item of this.items) {
|
if (typeof this.filterRes[item.name] !== 'undefined') {
|
valuehas = true;
|
break;
|
}
|
}
|
this.itemsFilled = valuehas;
|
}
|
},
|
handleClean() {
|
Object.keys(this.filterRes).forEach(key => {
|
// 如果不能取消，跳过
|
if (key === this.bar.name && this.bar.cancelable === false) {
|
return;
|
}
|
for (let item of this.items) {
|
if (key === item.name && item.cancelable === false) {
|
return;
|
}
|
}
|
// 清除值
|
this.filterRes[key] = [][0];
|
});
|
this.itemsFilled = false;
|
this.itemsChanged = false;
|
this.onChange(this.filterRes);
|
},
|
handleFinish() {
|
this.drawerShow = false;
|
// 有项目改变时，发送变化
|
if (this.itemsChanged) {
|
this.itemsChanged = false;
|
this.onChange(this.filterRes);
|
}
|
},
|
},
|
mounted() {
|
$(this.$refs.filter).parent().css({ transform: 'translate(0,0);' });
|
},
|
};
|
</script>
|
