feat: 要车单-列表&筛选+详情

+import request from '@/utils/request'
+import { ContentTypeEnum } from '@/utils/httpEnum';
+
+const baseUrl = '/requestCarTicket';
+// 查询列表
+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 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
+  })
+}
+

@@ -656,6 +656,22 @@
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"
 				"navigationBarTextStyle": "black"
 			}
 			}
+		},
+		{
+			"path": "pages/car_request_order/index",
+			"style": {
+				"navigationBarTitleText": "要车单",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		{
+			"path": "pages/car_request_order/detail",
+			"style": {
+				"navigationBarTitleText": "要车单详情",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
 		}
 		}
 	],
 	],
 	"subPackages": [
 	"subPackages": [

+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <view class="detail-page">
+        <view class="section">
+          <text class="row company">{{ form.orderingUnitName }}</text>
+          <view class="row"><text class="label">要车日期</text><text class="value">{{ form.requestCarDate }}</text></view>
+          <view class="row"><text class="label">要车办事处</text><text class="value">{{ form.deptName }}</text></view>
+          <view class="row"><text class="label">计划装货日期</text><text class="value">{{ form.deliveryDate }}</text></view>
+          <view class="row"><text class="label">装货厂别</text><text class="value">{{ form.workshopName }}</text></view>
+          <view class="row"><text class="label">订单编号</text><text class="value">{{ form.orderNo }}</text></view>
+          <view class="row"><text class="label">卸货地点</text><text class="value">{{ form.destination }}</text></view>
+          <view class="row"><text class="label">计划吨位(kg)</text><text class="value">{{ form.quantity }}</text></view>
+          <view class="row"><text class="label">接货人/联络人</text><text class="value">{{ form.consignee }}</text></view>
+          <view class="row"><text class="label">联系电话</text><text class="value">{{ form.phone }}</text></view>
+          <view class="row"><text class="label">装货时间</text><text class="value">{{ form.loadingTime }}</text></view>
+          <view class="row"><text class="label">外办审核人</text><text class="value">{{ form.externalAuditorName }}</text></view>
+          <view class="row"><text class="label">经营办审核人</text><text class="value">{{ form.businessOfficeAuditorName }}</text></view>
+          <view class="row"><text class="label">运作科审核人</text><text class="value">{{ form.operationsDepartmentAuditorName }}</text></view>
+          <view class="row"><text class="label">回货计划安排</text><text class="value">{{ form.returnPlanArrangement }}</text></view>
+          <view class="row"><text class="label">特殊需求、其他等</text><text class="value">{{ form.other }}</text></view>
+          <view class="row"><text class="label">装货特别要求/需求</text><text class="value">{{ form.specialLoadingRequirement }}</text></view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { getDetailApi } from '@/api/car_request_order.js'
+
+export default {
+  name: 'CarRequestOrderDetail',
+  data() {
+    return {
+      form: {},
+    }
+  },
+  computed: {
+  },
+  onLoad(query) {
+    const id = (query && (query.id || query.code)) || ''
+    if (id) this.loadDetail(id)
+  },
+  methods: {
+    async loadDetail(id) {
+      try {
+        const res = await getDetailApi(id)
+        this.form = res.data || {}
+      } catch (e) {
+        this.form = {}
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.scroll {
+  flex: 1;
+  background: #f3f3f3;
+}
+
+.detail-page {
+}
+
+.section {
+  padding: 32rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+  position: relative;
+}
+
+.row {
+  display: flex;
+  margin-bottom: 28rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.company {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.9);
+    padding-top: 10rpx;
+    margin-bottom: 32rpx;
+    line-height: 50rpx;
+  }
+
+  .label {
+    width: 240rpx;
+    line-height: 32rpx;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .value {
+    flex: 1;
+    line-height: 32rpx;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: right;
+    word-break: break-all;
+  }
+}
+
+.title-header {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 32rpx 32rpx 22rpx;
+  border-bottom: 1rpx dashed #f0f0f0;
+
+  &_icon {
+    width: 32rpx;
+    height: 28rpx;
+    margin-right: 16rpx;
+  }
+
+  span {
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 32rpx;
+    line-height: 44rpx;
+    font-weight: 600;
+  }
+}
+</style>

+<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 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.orderingUnitName }}</text>
+						</view>
+						<view class="info-row">
+							<text>订单编号</text><text>{{ item.orderNo || '-' }}</text>
+						</view>
+						<view class="info-row">
+							<text>要车办事处</text><text>{{ item.deptName || '-' }}</text>
+						</view>
+						<view class="info-row">
+							<text>装货厂别</text><text>{{ item.workshopName || '-' }}</text>
+						</view>
+						<view class="info-row">
+							<text>要车日期</text><text>{{ item.requestCarDate || '-' }}</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-easyinput v-model="model.deptName" placeholder="请输入办事处" :inputBorder="false"
+							placeholderStyle="font-size:14px" />
+					</view>
+
+					<view class="form-item">
+						<view class="label">装货厂别</view>
+						<uni-data-checkbox mode="tag" :multiple="false" :value-field="'value'" :text-field="'text'"
+							v-model="model.workshopId" @change="onWorkshopChange" :localdata="workshopOptions" />
+					</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/car_request_order.js'
+import {
+	getDicByCodes
+} from '@/utils/dic'
+import {
+	getDicName
+} from '@/utils/dic.js'
+
+export default {
+	components: {
+		CardList,
+		FilterModal,
+		SingleSelectSheet
+	},
+	data() {
+		return {
+			searchKeyword: '',
+			searchKeywordDebounced: '',
+			tabs: [],
+			// 给到 card 的筛选值
+			query: {
+				status: '',
+				companySuggestedCategory: '',
+				dateRange: []
+			},
+			extraParams: {},
+
+			// 批量选择
+			rowKey: 'id',
+			currentItems: [],
+
+			// 筛选弹框
+			filterVisible: false,
+			filterForm: {
+				status: '',
+				companySuggestedCategory: '',
+				dateRange: []
+			},
+			dicOptions: {
+				SHIP_ORDER_STATUS: [],
+			},
+			statusLocal: [],
+			workshopOptions: [],
+		}
+	},
+	computed: {
+		extraCombined() {
+			return {
+				searchKey: this.searchKeywordDebounced || undefined
+			}
+		}
+	},
+	watch: {
+		extraCombined: {
+			deep: true,
+			handler(v) {
+				this.extraParams = v
+			},
+			immediate: true
+		},
+
+	},
+	created() {
+		this.loadAllDicData()
+		this.loadWorkshopOptions()
+	},
+	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: {
+		async loadWorkshopOptions() {
+			try {
+				const res = await workshopQueryApi({ pageIndex: 1, pageSize: 9999 })
+				const list = (res && res.data && res.data.datas) || []
+				this.workshopOptions = list.map(it => ({ text: it.name || it.workshopName || '', value: it.id || it.workshopId || '' }))
+			} catch (e) {
+				this.workshopOptions = []
+			}
+		},
+		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/credit_manage/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
+			}
+			if ((payload.companySuggestedCategory === '' || payload.companySuggestedCategory == null) && this
+				.filterForm
+				.companySuggestedCategory !== '') {
+				payload.companySuggestedCategory = this.filterForm.companySuggestedCategory
+			}
+			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
+		},
+		onCategoryChange(e) {
+			const raw = e && e.detail && e.detail.value !== undefined ? e.detail.value : (e && e.value !== undefined ?
+				e.value : '')
+			this.filterForm.companySuggestedCategory = raw
+		},
+
+		// 列表接口（真实请求）
+		fetchList({
+			pageIndex,
+			pageSize,
+			query,
+			extra
+		}) {
+			const params = {
+				pageIndex,
+				pageSize,
+				...extra,
+				...query
+			}
+			if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+				params.requestCarDateStart = params.dateRange[0]
+				params.requestCarDateEnd = params.dateRange[1]
+				delete params.dateRange
+			}
+			if (this.searchKeywordDebounced) {
+				params.searchKey = 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 = ['SHIP_ORDER_STATUS']
+			return getDicByCodes(dicCodes).then(results => {
+				this.dicOptions.SHIP_ORDER_STATUS = results.SHIP_ORDER_STATUS.data || []
+				this.statusLocal = (this.dicOptions.SHIP_ORDER_STATUS || []).map(it => ({
+					value: it.code,
+					text: it.name
+				}))
+			}).catch(() => {
+				this.dicOptions = {
+					SHIP_ORDER_STATUS: [],
+				}
+				this.statusLocal = []
+			})
+		},
+		onCardClick(item) {
+			const id = (item && (item.id || item.code)) || ''
+			if (!id) return
+			const query = '?id=' + encodeURIComponent(id)
+			uni.navigateTo({
+				url: '/pages/car_request_order/detail' + query
+			})
+		},
+		getDicName: getDicName,
+		getCategoryClass(categoryName) {
+			if (!categoryName) return ''
+			if (categoryName.includes('A') || categoryName.includes('a')) {
+				return 'category_A'
+			} else if (categoryName.includes('B') || categoryName.includes('b')) {
+				return 'category_B'
+			} else if (categoryName.includes('C') || categoryName.includes('c')) {
+				return 'category_C'
+			} else if (categoryName.includes('D') || categoryName.includes('d')) {
+				return 'category_D'
+			}
+		},
+		onWorkshopChange(e) {
+			const raw = e && e.detail && e.detail.value !== undefined ? e.detail.value : (e && e.value !== undefined ? e.value : '')
+			this.filterForm.workshopId = raw
+			const match = (this.workshopOptions || []).find(o => String(o.value) === String(raw))
+			this.filterForm.workshopIdName = match ? (match.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-box {
+			position: absolute;
+			top: -32rpx;
+			right: -32rpx;
+
+			.status {
+				display: block;
+				height: 48rpx;
+				line-height: 48rpx;
+				font-weight: 600;
+				color: #fff;
+				font-size: 24rpx;
+				padding: 0 14rpx;
+				border-radius: 6rpx;
+				margin-bottom: 8rpx;
+
+				// 已签收
+				&.status_DELIVERED {
+					background: #E7E7E7;
+					color: rgba(0, 0, 0, 0.9);
+				}
+
+				// 已发货
+				&.status_SHIPMENTS {
+					background: #2BA471;
+				}
+
+				// 未发货
+				&.status_UN_SHIPMENTS {
+					background: #D54941;
+				}
+			}
+
+			.status2 {
+				display: block;
+				font-weight: 600;
+				line-height: 48rpx;
+				height: 48rpx;
+				color: #fff;
+				font-size: 24rpx;
+				padding: 0 14rpx;
+				border-radius: 6rpx;
+				background: #E7E7E7;
+				color: rgba(0, 0, 0, 0.9);
+
+			}
+
+		}
+
+	}
+
+	.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>