feat: 统一列表筛选缓存高亮并精简底部Tab

This commit is contained in:
2026-10-08 17:59:54 +08:00
parent 30e20853df
commit b259e0c2e7
11 changed files with 704 additions and 255 deletions
@@ -1,9 +1,12 @@
<template>
<view>
<view class="filterBar">
<u-search v-model="filters.order_no" placeholder="进仓单号" :show-action="false" @search="loadList" @custom="loadList" />
<view class="filterBtn" @click="filterShow = true">
<u-icon name="list" size="40" color="#666"></u-icon>
<u-search v-model="filters.order_no" placeholder="进仓单号" :show-action="false" @search="applySearch" @custom="applySearch" @clear="applySearch" />
<view class="filterBtn" :class="{ 'filter-active': hasActiveFilter }" @click="filterShow = true">
<view class="filterBtn__icon">
<u-icon :key="filterIconColor" name="list" size="44" :color="filterIconColor"></u-icon>
<view v-if="hasActiveFilter" class="filterBtn__badge"></view>
</view>
<text>筛选</text>
</view>
</view>
@@ -20,24 +23,26 @@
<addBtn url="./storeGoodsPurchaseInAdd"></addBtn>
<u-popup v-model="filterShow" mode="right" width="580rpx" :safe-area-inset-bottom="true">
<u-popup v-model="filterShow" mode="right" width="580rpx" :safe-area-inset-bottom="true" @close="cancelFilterEdit">
<view class="filterPanel">
<view class="filterTitle">筛选条件</view>
<view class="filterItem">
<text class="filterLabel">进仓单号</text>
<u-input v-model="filters.order_no" placeholder="请输入进仓单号" />
<view class="filterInput">
<u-input v-model="filters.order_no" placeholder="请输入进仓单号" :height="100" :custom-style="{ fontSize: '36rpx', color: '#202328' }" placeholder-style="color: #aeb4bf; font-size: 34rpx;" />
</view>
</view>
<view class="filterItem" @click="openSupplierSelect">
<text class="filterLabel">供应商</text>
<view class="filterValue">{{ supplierLabel || '全部' }} <u-icon name="arrow-right" size="28"></u-icon></view>
<view class="filterValue">{{ supplierLabel || '全部' }} <u-icon name="arrow-right" size="36"></u-icon></view>
</view>
<view class="filterItem" @click="openWarehouseSelect">
<text class="filterLabel">仓库</text>
<view class="filterValue">{{ warehouseLabel || '全部' }} <u-icon name="arrow-right" size="28"></u-icon></view>
<view class="filterValue">{{ warehouseLabel || '全部' }} <u-icon name="arrow-right" size="36"></u-icon></view>
</view>
<view class="filterItem" @click="openStatusSelect">
<text class="filterLabel">订单状态</text>
<view class="filterValue">{{ statusLabel || '全部' }} <u-icon name="arrow-right" size="28"></u-icon></view>
<view class="filterValue">{{ statusLabel || '全部' }} <u-icon name="arrow-right" size="36"></u-icon></view>
</view>
<view class="filterActions">
<u-button type="warning" size="medium" @click="resetFilter">重置</u-button>
@@ -46,8 +51,8 @@
</view>
</u-popup>
<u-select v-model="statusSelectShow" :list="statusSelectList" @confirm="onStatusConfirm"></u-select>
<u-select v-model="unitSelectShow" :list="unitSelectList" remote :loading="selectSearching" @search="onUnitSearch" @confirm="onUnitConfirm"></u-select>
<u-select class="pdaSelect" v-model="statusSelectShow" title="选择订单状态" :list="statusSelectList" :default-value="statusSelectDefault" @confirm="onStatusConfirm"></u-select>
<u-select class="pdaSelect" v-model="unitSelectShow" :list="unitSelectList" :default-value="unitSelectDefault" remote :loading="selectSearching" @search="onUnitSearch" @confirm="onUnitConfirm"></u-select>
</view>
</template>
@@ -56,6 +61,7 @@ import addBtn from '@/components/addBtn/addBtn.vue';
import PurchaseInItem from '@/components/card/storeGoodsPurchaseInItem.vue';
import {
getStatusOptions,
AUDIT_STATUS,
AUDIT_STATUS_MAP,
BUSINESS_UNIT_TYPE_PRODUCT_SUPPLIER,
WAREHOUSE_TYPE_FINISHED,
@@ -64,9 +70,11 @@ import {
fetchAllOrderList,
} from '@/common/storeGoodsPurchaseIn';
import { withNameParam } from '@/common/remoteSelect';
import listFilterMixin from '@/mixins/listFilterMixin';
export default {
components: { addBtn, PurchaseInItem },
mixins: [listFilterMixin],
data() {
return {
list: [],
@@ -83,13 +91,14 @@ export default {
selectSearching: false,
unitSearchSeq: 0,
unitSelectList: [{ value: '', label: '全部' }],
filterStorageKey: 'storeGoodsPurchaseInListFilters_v2',
filters: {
order_no: '',
supplier_id: '',
supplier_name: '',
warehouse_id: '',
warehouse_name: '',
audit_status: '',
audit_status: AUDIT_STATUS.PENDING,
},
statusSelectList: [
{ value: '', label: '全部' },
@@ -111,6 +120,7 @@ export default {
},
onLoad() {
uni.setNavigationBarTitle({ title: '成品采购进仓' });
this.restoreFilterCache();
uni.getSystemInfo({
success: (res) => {
this.scrollHeight = `${res.windowHeight - 50}px`;
@@ -121,6 +131,16 @@ export default {
this.loadList();
},
methods: {
createDefaultFilters() {
return {
order_no: '',
supplier_id: '',
supplier_name: '',
warehouse_id: '',
warehouse_name: '',
audit_status: AUDIT_STATUS.PENDING,
};
},
loadSupplierOptions() {
if (this.supplierOptions.length) return Promise.resolve(this.supplierOptions);
return this.$u.api.businessUnit.list({ unit_type_id: BUSINESS_UNIT_TYPE_PRODUCT_SUPPLIER })
@@ -145,10 +165,6 @@ export default {
return this.warehouseOptions;
});
},
applyUnitSelectList(list) {
const rows = Array.isArray(list) ? list.slice() : [];
this.unitSelectList = [{ value: '', label: '全部' }].concat(rows);
},
openUnitSelect(type) {
this.unitSelectType = type;
const cache = type === 'warehouse' ? this.warehouseOptions : this.supplierOptions;
@@ -170,7 +186,7 @@ export default {
if (type === 'warehouse') this.warehouseOptions = list;
else this.supplierOptions = list;
}
this.applyUnitSelectList(list);
this.applyUnitSelectList(list, empty);
}).catch((e) => {
if (seq !== this.unitSearchSeq) return;
uni.showToast({ title: (e && e.message) || '搜索失败', icon: 'none' });
@@ -199,12 +215,13 @@ export default {
loadList() {
if (this.listLoading) return;
this.listLoading = true;
const filters = this.appliedFilters || this.filters;
const params = {};
if (this.filters.order_no) params.order_no = this.filters.order_no;
if (this.filters.supplier_id) params.supplier_id = this.filters.supplier_id;
if (this.filters.warehouse_id) params.warehouse_id = this.filters.warehouse_id;
if (this.filters.audit_status !== '' && this.filters.audit_status !== null) {
params.audit_status = this.filters.audit_status;
if (filters.order_no) params.order_no = filters.order_no;
if (filters.supplier_id) params.supplier_id = filters.supplier_id;
if (filters.warehouse_id) params.warehouse_id = filters.warehouse_id;
if (this.hasFilterValue(filters.audit_status)) {
params.audit_status = filters.audit_status;
}
fetchAllOrderList((p) => this.$u.api.fpmPrcInOrder.list(p), params)
.then((rows) => {
@@ -249,33 +266,10 @@ export default {
uni.navigateTo({ url: `./${page}?id=${item.id}` });
},
openStatusSelect() { this.statusSelectShow = true; },
onStatusConfirm(e) { this.filters.audit_status = e[0].value; },
resetFilter() {
this.filters = {
order_no: '',
supplier_id: '',
supplier_name: '',
warehouse_id: '',
warehouse_name: '',
audit_status: '',
};
},
applyFilter() {
this.filterShow = false;
this.loadList();
},
},
};
</script>
<style>
page { background-color: #F8F8F8; }
.filterBar { display: flex; align-items: center; padding: 16rpx 20rpx; background: #fff; gap: 16rpx; }
.filterBtn { display: flex; flex-direction: column; align-items: center; font-size: 22rpx; color: #666; min-width: 80rpx; }
.filterPanel { padding: 30rpx; }
.filterTitle { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; }
.filterItem { margin-bottom: 24rpx; }
.filterLabel { display: block; font-size: 28rpx; color: #666; margin-bottom: 12rpx; }
.filterValue { display: flex; align-items: center; justify-content: space-between; padding: 16rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 28rpx; }
.filterActions { display: flex; gap: 20rpx; margin-top: 40rpx; }
<style lang="scss">
@import '@/common/list-filter.scss';
</style>