| | |
| | | class="c-filter" |
| | | ref="filter" |
| | | > |
| | | <view |
| | | class="c-filter-bar" |
| | | v-if="bar" |
| | | > |
| | | <view class="c-filter-bar"> |
| | | <CFilterSelect |
| | | v-if="bar.type === 'select'" |
| | | type="bar" |
| | | place="bar" |
| | | :label="bar.label" |
| | | :name="bar.name" |
| | | :options="selectOptions[bar.name] || []" |
| | | :cancelable="bar.cancelable" |
| | | :value="filterRes[bar.name]" |
| | | :onChange="evt => handleBarChange(bar.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | <CFilterDateRange |
| | | v-if="bar.type === 'dateRange'" |
| | | type="bar" |
| | | v-else-if="bar.type === 'dateRange'" |
| | | place="bar" |
| | | :name="bar.name" |
| | | :label="bar.label" |
| | | :value="filterRes[bar.name]" |
| | | :onChange="evt => handleBarChange(bar.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | <CFilterInput |
| | | v-if="bar.type === 'input'" |
| | | type="bar" |
| | | v-else-if="bar.type === 'input'" |
| | | place="bar" |
| | | :name="bar.name" |
| | | :label="bar.label" |
| | | :value="filterRes[bar.name]" |
| | | :onChange="evt => handleItemChange(bar.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | </view> |
| | | <view |
| | |
| | | > |
| | | <CFilterSelect |
| | | v-if="item.type === 'select'" |
| | | type="item" |
| | | place="item" |
| | | :label="item.label" |
| | | :name="item.name" |
| | | :options="selectOptions[item.name] || []" |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt => handleItemChange(item.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | <CFilterDateRange |
| | | v-if="item.type === 'dateRange'" |
| | | type="item" |
| | | v-else-if="item.type === 'dateRange'" |
| | | place="item" |
| | | :label="item.label" |
| | | :name="item.name" |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt => handleItemChange(item.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | <CFilterRadio |
| | | v-if="item.type === 'radio'" |
| | | type="item" |
| | | v-else-if="item.type === 'radio'" |
| | | place="item" |
| | | :label="item.label" |
| | | :name="item.name" |
| | | :options="selectOptions[item.name] || []" |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt => handleItemChange(item.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | <CFilterInput |
| | | v-if="item.type === 'input'" |
| | | type="item" |
| | | v-else-if="item.type === 'input'" |
| | | place="item" |
| | | :label="item.label" |
| | | :name="item.name" |
| | | :value="filterRes[item.name]" |
| | | :onChange="evt => handleItemChange(item.name, evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | /> |
| | | </view> |
| | | </scroll-view> |
| | |
| | | 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; |
| | | handleChange(changed) { |
| | | // 横条项 |
| | | if (changed.place === 'bar') { |
| | | this.$set(this.filterRes, changed.name, changed.value); |
| | | this.onChange(this.filterRes); |
| | | } |
| | | // 为空是检查所有面板值是否为空 |
| | | else { |
| | | let valuehas = false; |
| | | for (let item of this.items) { |
| | | if (typeof this.filterRes[item.name] !== 'undefined') { |
| | | valuehas = true; |
| | | break; |
| | | } |
| | | // 展开项 |
| | | else if (changed.place === 'item') { |
| | | this.$set(this.filterRes, changed.name, changed.value); |
| | | this.itemsChanged = true; |
| | | // 如果变化值不为空 |
| | | if (typeof value !== 'undefined') { |
| | | this.itemsFilled = true; |
| | | } |
| | | this.itemsFilled = valuehas; |
| | | // 为空时检查所有面板值是否为空 |
| | | else { |
| | | let valuehas = false; |
| | | for (let item of this.items) { |
| | | if (typeof this.filterRes[item.name] !== 'undefined') { |
| | | valuehas = true; |
| | | break; |
| | | } |
| | | } |
| | | this.itemsFilled = valuehas; |
| | | } |
| | | } |
| | | }, |
| | | handleClean() { |