feat: 优化出库筛选字号与缓存

src/pages/storefabric/storeFabricBusinessOutList.vue

@@ -1,9 +1,19 @@
 <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="{ 'filterBtn--active': hasActiveFilter }" @click="filterShow = true">
+				<view class="filterBtn__icon">
+					<u-icon name="list" size="44" :color="hasActiveFilter ? '#2979ff' : '#666'"></u-icon>
+					<view v-if="hasActiveFilter" class="filterBtn__badge"></view>
+				</view>
 				<text>筛选</text>
 			</view>
 		</view>
@@ -20,36 +30,48 @@
 
 		<addBtn url="./storeFabricBusinessOutAdd"></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">
 					<text class="filterLabel">出仓日期</text>
 					<view class="dateRow">
-						<picker mode="date" :value="filters.start_date" @change="e => filters.start_date = e.detail.value">
-							<view class="dateInput">{{ filters.start_date || '开始日期' }}</view>
+						<picker class="datePicker" mode="date" :value="filters.start_date" @change="e => filters.start_date = e.detail.value">
+							<view class="dateInput" :class="{ 'dateInput--placeholder': !filters.start_date }">
+								{{ filters.start_date || '开始日期' }}
+							</view>
 						</picker>
-						<text>~</text>
-						<picker mode="date" :value="filters.end_date" @change="e => filters.end_date = e.detail.value">
-							<view class="dateInput">{{ filters.end_date || '结束日期' }}</view>
+						<text class="dateSeparator">~</text>
+						<picker class="datePicker" mode="date" :value="filters.end_date" @change="e => filters.end_date = e.detail.value">
+							<view class="dateInput" :class="{ 'dateInput--placeholder': !filters.end_date }">
+								{{ filters.end_date || '结束日期' }}
+							</view>
 						</picker>
 					</view>
 				</view>
 				<view class="filterItem" @click="openDeliveryUnitSelect">
 					<text class="filterLabel">出仓单位</text>
-					<view class="filterValue">{{ deliveryUnitLabel || '全部' }} <u-icon name="arrow-right" size="28"></u-icon></view>
+					<view class="filterValue">{{ deliveryUnitLabel || '全部' }} <u-icon name="arrow-right" size="36"></u-icon></view>
 				</view>
 				<view class="filterItem" @click="openBusinessUnitSelect">
 					<text class="filterLabel">接收单位</text>
-					<view class="filterValue">{{ businessUnitLabel || '全部' }} <u-icon name="arrow-right" size="28"></u-icon></view>
+					<view class="filterValue">{{ businessUnitLabel || '全部' }} <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>
@@ -58,8 +80,22 @@
 			</view>
 		</u-popup>
 
-		<u-select v-model="statusSelectShow" :list="statusSelectList" @confirm="onStatusConfirm"></u-select>
-		<u-select v-model="unitSelectShow" :list="unitSelectList" @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"
+			title="选择出仓单位"
+			:list="unitSelectList"
+			:default-value="unitSelectDefault"
+			@confirm="onUnitConfirm"
+		></u-select>
 		<search-select-popup
 			:show.sync="businessUnitSelectShow"
 			title="选择接收单位"
@@ -85,6 +121,33 @@ import {
 	fetchAllOrderList,
 } from '@/common/storeFabricBusinessOut';
 
+const FILTER_STORAGE_KEY = 'storeFabricBusinessOutListFilters';
+
+const createDefaultFilters = () => ({
+	order_no: '',
+	start_date: '',
+	end_date: '',
+	delivery_unit_id: '',
+	delivery_unit_name: '',
+	business_unit_id: '',
+	business_unit_name: '',
+	audit_status: AUDIT_STATUS.PENDING,
+});
+
+const normalizeFilters = (value) => {
+	const filters = createDefaultFilters();
+	if (!value || typeof value !== 'object' || Array.isArray(value)) return filters;
+
+	Object.keys(filters).forEach((key) => {
+		if (typeof value[key] === 'string' || typeof value[key] === 'number') {
+			filters[key] = value[key];
+		}
+	});
+	if (!filters.delivery_unit_id) filters.delivery_unit_name = '';
+	if (!filters.business_unit_id) filters.business_unit_name = '';
+	return filters;
+};
+
 export default {
 	components: { addBtn, FabricOutItem, SearchSelectPopup },
 	data() {
@@ -101,16 +164,8 @@ export default {
 			businessUnitOptions: [],
 			unitOptionsLoading: false,
 			billTypeName: (BILL_TYPES[0] || {}).label || '坯布其他出货单',
-			filters: {
-				order_no: '',
-				start_date: '',
-				end_date: '',
-				delivery_unit_id: '',
-				delivery_unit_name: '',
-				business_unit_id: '',
-				business_unit_name: '',
-				audit_status: '',
-			},
+			filters: createDefaultFilters(),
+			appliedFilters: createDefaultFilters(),
 			statusSelectList: [
 				{ value: '', label: '全部' },
 				...getStatusOptions(),
@@ -134,20 +189,73 @@ export default {
 		businessUnitSelectList() {
 			return [{ value: '', label: '全部' }, ...this.businessUnitOptions];
 		},
+		statusSelectDefault() {
+			const index = this.statusSelectList.findIndex(
+				(item) => String(item.value) === String(this.filters.audit_status)
+			);
+			return [index >= 0 ? index : 0];
+		},
+		unitSelectDefault() {
+			const index = this.unitSelectList.findIndex(
+				(item) => String(item.value) === String(this.filters.delivery_unit_id)
+			);
+			return [index >= 0 ? index : 0];
+		},
+		hasActiveFilter() {
+			const filters = this.appliedFilters;
+			return Boolean(
+				String(filters.order_no || '').trim()
+				|| filters.start_date
+				|| filters.end_date
+				|| filters.delivery_unit_id
+				|| filters.business_unit_id
+				|| (filters.audit_status !== '' && filters.audit_status !== null)
+			);
+		},
 	},
 	onLoad() {
 		uni.setNavigationBarTitle({ title: '坯布出库列表' });
+		this.restoreFilterCache();
 		uni.getSystemInfo({
 			success: (res) => {
 				this.scrollHeight = `${res.windowHeight - 50}px`;
 			},
 		});
-		this.loadList();
 	},
 	onShow() {
 		this.loadList();
 	},
 	methods: {
+		restoreFilterCache() {
+			try {
+				const filters = normalizeFilters(uni.getStorageSync(FILTER_STORAGE_KEY));
+				this.filters = { ...filters };
+				this.appliedFilters = { ...filters };
+			} catch (e) {
+				this.filters = createDefaultFilters();
+				this.appliedFilters = createDefaultFilters();
+			}
+		},
+		saveFilterCache() {
+			try {
+				uni.setStorageSync(FILTER_STORAGE_KEY, { ...this.appliedFilters });
+			} catch (e) {
+				// 缓存失败不影响列表筛选
+			}
+		},
+		commitFilters() {
+			const filters = normalizeFilters(this.filters);
+			this.filters = { ...filters };
+			this.appliedFilters = { ...filters };
+			this.saveFilterCache();
+			this.loadList();
+		},
+		applySearch() {
+			this.commitFilters();
+		},
+		cancelFilterEdit() {
+			this.filters = { ...this.appliedFilters };
+		},
 		loadDeliveryUnitOptions() {
 			if (this.deliveryUnitOptions.length) return Promise.resolve(this.deliveryUnitOptions);
 			return this.$u.api.businessUnit.list({})
@@ -222,10 +330,11 @@ export default {
 			}
 		},
 		loadList() {
+			const filters = this.appliedFilters;
 			const params = {};
-			if (this.filters.order_no) params.order_no = this.filters.order_no;
-			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.audit_status !== '' && filters.audit_status !== null) {
+				params.audit_status = filters.audit_status;
 			}
 			fetchAllOrderList((p) => this.$u.api.gfmOtherDeliveryOrder.list(p), params)
 				.then((rows) => {
@@ -259,12 +368,13 @@ export default {
 		},
 		// 后端列表仅支持 单号/状态 过滤，出仓日期与单位在前端做本地过滤
 		matchClientFilter(item) {
-			if (this.filters.start_date && item.out_date < this.filters.start_date) return false;
-			if (this.filters.end_date && item.out_date > this.filters.end_date) return false;
-			if (this.filters.delivery_unit_id && String(item.delivery_unit_id) !== String(this.filters.delivery_unit_id)) {
+			const filters = this.appliedFilters;
+			if (filters.start_date && item.out_date < filters.start_date) return false;
+			if (filters.end_date && item.out_date > filters.end_date) return false;
+			if (filters.delivery_unit_id && String(item.delivery_unit_id) !== String(filters.delivery_unit_id)) {
 				return false;
 			}
-			if (this.filters.business_unit_id && String(item.business_unit_id) !== String(this.filters.business_unit_id)) {
+			if (filters.business_unit_id && String(item.business_unit_id) !== String(filters.business_unit_id)) {
 				return false;
 			}
 			return true;
@@ -282,35 +392,157 @@ export default {
 		openStatusSelect() { this.statusSelectShow = true; },
 		onStatusConfirm(e) { this.filters.audit_status = e[0].value; },
 		resetFilter() {
-			this.filters = {
-				order_no: '',
-				start_date: '',
-				end_date: '',
-				delivery_unit_id: '',
-				delivery_unit_name: '',
-				business_unit_id: '',
-				business_unit_name: '',
-				audit_status: '',
-			};
+			this.filters = createDefaultFilters();
 		},
 		applyFilter() {
+			this.commitFilters();
 			this.filterShow = false;
-			this.loadList();
 		},
 	},
 };
 </script>
 
-<style>
+<style lang="scss">
+@import '@/common/pda-typography.scss';
+
 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; }
-.dateRow { display: flex; align-items: center; gap: 12rpx; }
-.dateInput { padding: 16rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 26rpx; min-width: 200rpx; text-align: center; }
-.filterActions { display: flex; gap: 20rpx; margin-top: 40rpx; }
+.filterBtn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-width: 88rpx;
+	min-height: 76rpx;
+	padding: 6rpx 8rpx;
+	border: 2rpx solid transparent;
+	border-radius: 10rpx;
+	box-sizing: border-box;
+	font-size: $pda-font-nav-sub;
+	line-height: 1.2;
+	color: #666;
+	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
+}
+.filterBtn--active {
+	color: #2979ff;
+	background: #eef5ff;
+	border-color: #9fc5ff;
+}
+.filterBtn__icon {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.filterBtn__badge {
+	position: absolute;
+	top: -3rpx;
+	right: -7rpx;
+	width: 13rpx;
+	height: 13rpx;
+	border: 3rpx solid #fff;
+	border-radius: 50%;
+	background: #ff4d4f;
+	box-sizing: content-box;
+}
+.filterPanel {
+	min-height: 100%;
+	padding: 32rpx 28rpx;
+	box-sizing: border-box;
+}
+.filterTitle {
+	margin-bottom: 30rpx;
+	font-size: $pda-font-popup-title;
+	font-weight: bold;
+	color: #202328;
+}
+.filterItem { margin-bottom: 28rpx; }
+.filterLabel {
+	display: block;
+	margin-bottom: 14rpx;
+	font-size: $pda-font-body;
+	line-height: 1.35;
+	color: #555b66;
+}
+.filterInput {
+	display: flex;
+	align-items: center;
+	min-height: $pda-row-min-height;
+	padding: 0 18rpx;
+	background: #f5f6f8;
+	border-radius: 8rpx;
+	box-sizing: border-box;
+}
+::v-deep .filterInput .u-input__input {
+	font-size: $pda-font-body !important;
+	color: #202328;
+}
+::v-deep .filterInput .u-input__input::placeholder {
+	font-size: $pda-font-placeholder;
+	color: #aeb4bf;
+}
+.filterValue {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	min-height: $pda-row-min-height;
+	padding: 0 18rpx;
+	background: #f5f6f8;
+	border-radius: 8rpx;
+	box-sizing: border-box;
+	font-size: $pda-font-body;
+	color: #202328;
+}
+.dateRow {
+	display: flex;
+	align-items: center;
+	gap: 10rpx;
+}
+.datePicker {
+	flex: 1;
+	min-width: 0;
+}
+.dateInput {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: $pda-row-min-height;
+	padding: 0 8rpx;
+	background: #f5f6f8;
+	border-radius: 8rpx;
+	box-sizing: border-box;
+	font-size: $pda-font-body;
+	color: #202328;
+	text-align: center;
+	white-space: nowrap;
+}
+.dateInput--placeholder {
+	font-size: $pda-font-placeholder;
+	color: #7d8490;
+}
+.dateSeparator {
+	flex-shrink: 0;
+	font-size: $pda-font-body;
+	color: #555b66;
+}
+.filterActions {
+	display: flex;
+	gap: 20rpx;
+	margin-top: 40rpx;
+}
+.filterActions .u-btn {
+	flex: 1;
+	height: $pda-button-height !important;
+	line-height: $pda-button-height !important;
+	padding: 0 !important;
+	font-size: $pda-font-button !important;
+}
+::v-deep .pdaSelect .u-select__header {
+	height: $pda-row-min-height;
+}
+::v-deep .pdaSelect .u-select__header__btn,
+::v-deep .pdaSelect .u-select__header__title,
+::v-deep .pdaSelect .u-select__body__picker-view__item {
+	font-size: $pda-font-popup-item !important;
+}
 </style>