feat: 延期发货单-列表&筛选

+import request from '@/utils/request'
+import { ContentTypeEnum } from '@/utils/httpEnum';
+
+const baseUrl = '/delayedShipment';
+// 查询列表
+export function queryApi(params) {
+  return request({
+    url: baseUrl + `/query`,
+    method: 'get',
+    params
+  })
+}
+
+// 根据ID查询详情数据
+export function getDetailApi(id) {
+  return request({
+    url:  baseUrl,
+    method: 'get',
+    params: { id }
+  })
+}
+
+// 取消
+export function cancelApi(id) {
+  return request({
+    url:  baseUrl + '/cancel',
+    method: 'get',
+    params: { id }
+  })
+}
+
+// 延期发货按钮-选择的数据查询
+export function getShipmentPlanDetailApi(id) {
+  return request({
+    url:  '/shipments/plan/detail',
+    method: 'get',
+    params: { id }
+  })
+}
+
+// 新增保存
+export function createApi(params) {
+  return request({
+    url: baseUrl,
+    method: 'post',
+    data: params,
+    contentType: ContentTypeEnum.JSON
+  })
+}
+
+
+// 修改保存
+export function updateApi(params) {
+  return request({
+    url: baseUrl,
+    method: 'put',
+    data: params,
+    contentType: ContentTypeEnum.JSON
+  })
+}
+

@@ -658,6 +658,14 @@
 			}
 			}
 		},
 		},
 		{
 		{
+			"path": "pages/delay_invoice/index",
+			"style": {
+				"navigationBarTitleText": "延期发货单",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		{
 			"path": "pages/car_request_order/index",
 			"path": "pages/car_request_order/index",
 			"style": {
 			"style": {
 				"navigationBarTitleText": "要车单",
 				"navigationBarTitleText": "要车单",

+<template>
+	<view class="page">
+		<view class="dev-list-fixed">
+			<view class="search-row">
+				<uni-search-bar v-model="searchKeyword" radius="6" placeholder="请输入所属办" clearButton="auto"
+					cancelButton="none" bgColor="#F3F3F3" textColor="rgba(0,0,0,0.4)" @confirm="search"
+					@input="onSearchInput" />
+				<view class="tool-icons">
+					<image v-if="$auth.hasPermi('shipping-plan-manage:replenishment-order:add')" class="tool-icon"
+						src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+					<image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+				</view>
+			</view>
+		</view>
+
+
+		<!-- 列表卡片组件 -->
+		<view class="list-box">
+			<card-list ref="cardRef" :fetch-fn="fetchList" :query="query" :extra="extraParams" row-key="id"
+				:enable-refresh="true" :enable-load-more="true" @loaded="onCardLoaded" @error="onCardError">
+				<template v-slot="{ item, selected }">
+					<view class="card" @click.stop="onCardClick(item)">
+						<view class="card-header">
+							<text class="title omit2">{{ item.deptName }}</text>
+							<text :class="['status', `status_${item.status}`]">{{ filterStatus(item.status) }}</text>
+						</view>
+						<view class="info-row">
+							<text>申请日期</text><text>{{ item.applyDate || '-' }}</text>
+						</view>
+					</view>
+				</template>
+			</card-list>
+		</view>
+
+
+
+		<!-- 筛选弹框 -->
+		<filter-modal :visible.sync="filterVisible" :value.sync="filterForm" title="筛选" @reset="onFilterReset"
+			@confirm="onFilterConfirm">
+			<template v-slot="{ model }">
+				<view class="filter-form">
+					<view class="form-item">
+						<view class="label">状态</view>
+						<uni-data-checkbox mode="tag" :multiple="false" :value-field="'value'" :text-field="'text'"
+							v-model="model.status" @change="onStatusChange" :localdata="statusLocal" />
+					</view>
+					<view class="form-item">
+						<view class="label">申请日期</view>
+						<uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+					</view>
+				</view>
+			</template>
+		</filter-modal>
+	</view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { workshopQueryApi } from '@/api/devManage.js'
+import SingleSelectSheet from '@/components/single-select/index.vue'
+import {
+	queryApi
+} from '@/api/delay_invoice.js'
+import {
+	getDicByCodes
+} from '@/utils/dic'
+
+export default {
+	components: {
+		CardList,
+		FilterModal,
+		SingleSelectSheet
+	},
+	data() {
+		return {
+			searchKeyword: '',
+			searchKeywordDebounced: '',
+			tabs: [],
+			// 给到 card 的筛选值
+			query: {
+				status: '',
+				dateRange: []
+			},
+			extraParams: {},
+
+			// 批量选择
+			rowKey: 'id',
+			currentItems: [],
+
+			// 筛选弹框
+			filterVisible: false,
+			filterForm: {
+				status: '',
+				dateRange: []
+			},
+			dicOptions: {
+				AUDIT_STATUS: [],
+			},
+			statusLocal: [],
+		}
+	},
+	computed: {
+		extraCombined() {
+			return {
+				deptName: this.searchKeywordDebounced || undefined
+			}
+		}
+	},
+	watch: {
+		extraCombined: {
+			deep: true,
+			handler(v) {
+				this.extraParams = v
+			},
+			immediate: true
+		},
+
+	},
+	created() {
+		this.loadAllDicData()
+	},
+	onLoad() { },
+	// 页面触底兜底：当页面自身滚动到底部时，转调卡片组件加载更多
+	onReachBottom() {
+		if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+			this.$refs.cardRef.onLoadMore()
+		}
+	},
+	beforeDestroy() {
+		if (this.searchDebounceTimer) {
+			clearTimeout(this.searchDebounceTimer)
+			this.searchDebounceTimer = null
+		}
+	},
+	methods: {
+		onCardLoaded({
+			items
+		}) {
+			this.currentItems = items
+		},
+		onCardError() {
+			uni.showToast({
+				title: '列表加载失败',
+				icon: 'none'
+			})
+		},
+		// 输入实时搜索：1200ms 防抖，仅在停止输入超过阈值后刷新
+		onSearchInput(val) {
+			if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+			this.searchDebounceTimer = setTimeout(() => {
+				this.searchKeywordDebounced = this.searchKeyword
+				this.searchDebounceTimer = null
+			}, 1200)
+		},
+		// uni-search-bar 确认搜索：更新关键字并触发 CardList 刷新
+		search(e) {
+			const val = e && e.value != null ? e.value : this.searchKeyword
+			this.searchKeyword = val
+			this.searchKeywordDebounced = val
+		},
+		onAdd() {
+			uni.navigateTo({
+				url: '/pages/replenishment_order/add'
+			})
+		},
+		openFilter() {
+			this.filterVisible = true
+		},
+		onFilterReset(payload) {
+			this.filterForm = payload
+		},
+		onFilterConfirm(payload) {
+			if ((payload.status === '' || payload.status == null) && this.filterForm.status !== '') {
+				payload.status = this.filterForm.status
+			}
+			this.query = {
+				...payload
+			}
+		},
+		onStatusChange(e) {
+			const raw = e && e.detail && e.detail.value !== undefined ?
+				e.detail.value :
+				(e && e.value !== undefined ? e.value : '')
+			this.filterForm.status = raw
+		},
+
+		// 列表接口（真实请求）
+		fetchList({
+			pageIndex,
+			pageSize,
+			query,
+			extra
+		}) {
+			const params = {
+				pageIndex,
+				pageSize,
+				...extra,
+				...query
+			}
+			if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+				params.applyDateStart = params.dateRange[0]
+				params.applyDateEnd = params.dateRange[1]
+				delete params.dateRange
+			}
+			if (this.searchKeywordDebounced) {
+				params.deptName = this.searchKeywordDebounced
+			}
+			return queryApi(params)
+				.then(res => {
+					const _data = res.data || {};
+					const records = _data.datas || [];
+					const totalCount = _data.totalCount || 0;
+					const hasNext = _data.hasNext || false
+					return {
+						records,
+						totalCount,
+						hasNext
+					}
+				})
+				.catch(err => {
+					console.error('fetchList error', err)
+					this.onCardError()
+					return {
+						records: [],
+						totalCount: 0,
+						hasNext: false
+					}
+				})
+		},
+		loadAllDicData() {
+			const dicCodes = ['AUDIT_STATUS']
+			return getDicByCodes(dicCodes).then(results => {
+				this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS.data || []
+				this.statusLocal = (this.dicOptions.AUDIT_STATUS || []).map(it => ({
+					value: it.code,
+					text: it.name
+				}))
+			}).catch(() => {
+				this.dicOptions = {
+					AUDIT_STATUS: [],
+				}
+				this.statusLocal = []
+			})
+		},
+		onCardClick(item) {
+			const id = (item && (item.id || item.code)) || ''
+			if (!id) return
+			const query = '?id=' + encodeURIComponent(id)
+			uni.navigateTo({
+				url: '/pages/replenishment_order/detail' + query
+			})
+		},
+		filterStatus(status) {
+			return this.statusLocal.filter(item => item.value === status)[0].text || '';
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.dev-list-fixed {
+	position: fixed;
+	top: 96rpx;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	background: #fff;
+
+	.search-row {
+		display: flex;
+		align-items: center;
+		padding: 16rpx 32rpx;
+
+		.uni-searchbar {
+			padding: 0;
+			flex: 1;
+		}
+
+		.tool-icons {
+			display: flex;
+
+			.tool-icon {
+				width: 48rpx;
+				height: 48rpx;
+				display: block;
+				margin-left: 32rpx;
+			}
+		}
+	}
+
+}
+
+/* 仅当前页覆盖 uni-search-bar 盒子高度 */
+::v-deep .uni-searchbar__box {
+	height: 80rpx !important;
+	justify-content: start;
+
+	.uni-searchbar__box-search-input {
+		font-size: 32rpx !important;
+	}
+}
+
+.list-box {
+	flex: 1;
+	padding-top: 132rpx;
+
+	&.pad-batch {
+		padding-bottom: 144rpx;
+	}
+
+	.card {
+		position: relative;
+	}
+
+	.card-header {
+		margin-bottom: 28rpx;
+		position: relative;
+
+		.title {
+			font-size: 36rpx;
+			font-weight: 600;
+			line-height: 50rpx;
+			color: rgba(0, 0, 0, 0.9);
+			width: 578rpx;
+		}
+
+		.status {
+			font-weight: 600;
+			position: absolute;
+			top: -32rpx;
+			right: -32rpx;
+			height: 48rpx;
+			line-height: 48rpx;
+			color: #fff;
+			font-size: 24rpx;
+			padding: 0 14rpx;
+			border-radius: 6rpx;
+
+			// 审核中
+			&.status_AUDIT {
+				background: $theme-primary;
+			}
+
+			// 审核通过
+			&.status_PASS {
+				background: #2BA471;
+			}
+
+			// 已驳回
+			&.status_REFUSE {
+				background: #d54941;
+			}
+
+			// 已取消
+			&.status_CANCEL {
+				background: #e7e7e7;
+				color: rgba(0, 0, 0, 0.6);
+			}
+
+		}
+
+	}
+
+	.info-row {
+		display: flex;
+		align-items: center;
+		color: rgba(0, 0, 0, 0.6);
+		font-size: 28rpx;
+		margin-bottom: 24rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		text {
+			width: 60%;
+			line-height: 32rpx;
+
+			&:last-child {
+				color: rgba(0, 0, 0, 0.9);
+				width: 40%;
+			}
+
+			&.category {
+				display: inline-block;
+				padding: 4rpx 12rpx;
+				border-radius: 6rpx;
+				font-size: 24rpx;
+				width: auto;
+
+				&.category_A {
+					background: #FFF0ED;
+					color: #D54941;
+				}
+
+				&.category_B {
+					background: #FFF1E9;
+					color: #E37318;
+				}
+
+				&.category_C {
+					background: #F2F3FF;
+					color: $theme-primary;
+				}
+
+				&.category_D {
+					background: #E3F9E9;
+					color: #2BA471;
+				}
+			}
+		}
+
+	}
+}
+
+.filter-form {
+	.form-item {
+		margin-bottom: 24rpx;
+	}
+
+	.label {
+		margin-bottom: 20rpx;
+		color: rgba(0, 0, 0, 0.9);
+		height: 44rpx;
+		line-height: 44rpx;
+		font-size: 30rpx;
+	}
+
+	.uni-easyinput {
+		border: 1rpx solid #f3f3f3;
+	}
+
+}
+
+/* 深度覆盖 uni-data-checkbox（mode=tag）内部的 tag 展示与间距 */
+::v-deep .filter-form .uni-data-checklist .checklist-group {
+	.checklist-box {
+		&.is--tag {
+			width: 212rpx;
+			margin-top: 0;
+			margin-bottom: 24rpx;
+			margin-right: 24rpx;
+			height: 80rpx;
+			padding: 0;
+			border-radius: 12rpx;
+			background-color: #f3f3f3;
+			border-color: #f3f3f3;
+
+			&:nth-child(3n) {
+				margin-right: 0;
+			}
+
+			.checklist-content {
+				display: flex;
+				justify-content: center;
+			}
+
+			.checklist-text {
+				color: rgba(0, 0, 0, 0.9);
+				font-size: 28rpx;
+			}
+		}
+
+		&.is-checked {
+			background-color: $theme-primary-plain-bg !important;
+			border-color: $theme-primary-plain-bg !important;
+
+			.checklist-text {
+				color: $theme-primary !important;
+			}
+		}
+	}
+
+}
+</style>