From bab9c9855fa3a0088e0013e2ac2c8236133aae44 Mon Sep 17 00:00:00 2001
From: HeYQ <heyingquan.km@haier.com>
Date: Mon, 3 Aug 2026 10:11:22 +0800
Subject: [PATCH] =?UTF-8?q?add:=E6=96=B0=E5=A2=9E=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/commonUI/DrawerPicker.vue     | 190 ++++++++++++++++++++++
 components/commonUI/TreeDrawerPicker.vue | 195 ++++++++++++++++++++++
 components/proQuery/proQuery.vue         | 197 +++++++++++++++++++++++
 3 files changed, 582 insertions(+)
 create mode 100644 components/commonUI/DrawerPicker.vue
 create mode 100644 components/commonUI/TreeDrawerPicker.vue
 create mode 100644 components/proQuery/proQuery.vue

diff --git a/components/commonUI/DrawerPicker.vue b/components/commonUI/DrawerPicker.vue
new file mode 100644
index 0000000..1b1877c
--- /dev/null
+++ b/components/commonUI/DrawerPicker.vue
@@ -0,0 +1,190 @@
+<!--展示树结构的抽屉选择器-->
+<template>
+	<view class="bg-gradual-blue">
+		<!-- <scroll-view scroll-y class="DrawerPage" :class="showDrawer?'show':''">
+			<view class='padding margin text-center'>
+				<view class='cu-btn bg-green lg block shadow radius margin' @tap="showModal" data-target="viewModal">
+					选择机组
+				</view>
+			</view>
+		</scroll-view> -->
+		<!--选择机组相关的抽屉-->
+		<scroll-view scroll-y class="DrawerWindow" :class="showDrawer?'show':''"
+			style="height:100%;back-ground-color:red;">
+			<view cclass="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg">
+				<view class="cu-bar bg-grey solid-bottom margin-top-sm">
+					<view class="action text-white">
+						<text>{{title}}</text>
+						<!-- <text class="text-red margin-left">{{dataList ? dataList.length:0}}</text> -->
+						<text>个</text>
+					</view>
+				</view>
+				<scroll-view scroll-y class="bg-white" style="max-height: calc(100vh);">
+					<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
+						<view class="cu-item arrow" v-for="(item,index) in dataList" :key="index">
+							<view class="content" @tap="tabSelect(item)">
+								<text class="text-grey">🏭</text>
+								<text class="text-grey">{{item.name}}</text>
+								<view class="solid-bottom text-xs">
+									<text class="text-gray">机组数：<!-- {{item.children.length}} --> </text>
+									<!-- <view class="cu-tag badge bg-cyan">出库站台</view> -->
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+			<view class="DrawerClose" :class="showDrawer?'show':''" @tap="hideModal">
+				<text class="cuIcon-pullright"></text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'TreeDrawerPicker',
+		props: {
+			// 表单项配置数组
+			title: {
+				type: String,
+				default: () => 'Demo标题'
+			},
+			// 表单项配置数组
+			dataList: {
+				type: Array,
+				default: () => []
+			},
+			showDrawer: {
+				type: Boolean,
+				default: () => false
+			},
+		},
+		emits: ['on-select', 'on-hiden'],
+		watch: {
+
+		},
+		data() {
+			return {
+				modalName: null,
+			};
+		},
+		methods: {
+			hideModal(e) {
+				this.$emit('on-hiden', false);
+			},
+			tabSelect(item) {
+				this.$emit('on-select', {
+					...item
+				});
+			}
+		},
+	}
+</script>
+
+<style>
+	page {
+		background-image: var(--gradualBlue);
+		width: 100vw;
+		overflow: hidden;
+	}
+
+	.DrawerPage {
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		left: 0vw;
+		background-color: #f1f1f1;
+		transition: all 0.4s;
+	}
+
+	.DrawerPage.show {
+		transform: scale(0.9, 0.9);
+		left: 85vw;
+		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
+		transform-origin: 0;
+	}
+
+	.DrawerWindow {
+		position: absolute;
+		width: 85vw;
+		height: 100vh;
+		left: 0;
+		top: 0;
+		transform: scale(0.9, 0.9) translateX(-100%);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+		padding: 100upx 0;
+	}
+
+	.DrawerWindow.show {
+		transform: scale(1, 1) translateX(0%);
+		opacity: 1;
+		pointer-events: all;
+	}
+
+	.DrawerClose {
+		position: absolute;
+		width: 40vw;
+		height: 100vh;
+		right: 0;
+		top: 0;
+		color: transparent;
+		padding-bottom: 30upx;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
+		letter-spacing: 5px;
+		font-size: 50upx;
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+	}
+
+	.DrawerClose.show {
+		opacity: 1;
+		pointer-events: all;
+		width: 15vw;
+		color: #fff;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
+		width: 64upx;
+		height: 64upx;
+		line-height: 64upx;
+		margin: 0;
+		display: inline-block;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+		margin: 0;
+	}
+
+	.DrawerPage .nav {
+		flex: 1;
+	}
+
+	.DrawerPage .nav .cu-item.cur {
+		border-bottom: 0;
+		position: relative;
+	}
+
+	.DrawerPage .nav .cu-item.cur::after {
+		content: "";
+		width: 10upx;
+		height: 10upx;
+		background-color: currentColor;
+		position: absolute;
+		bottom: 10upx;
+		border-radius: 10upx;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action {
+		flex: initial;
+	}
+</style>
\ No newline at end of file
diff --git a/components/commonUI/TreeDrawerPicker.vue b/components/commonUI/TreeDrawerPicker.vue
new file mode 100644
index 0000000..002caf3
--- /dev/null
+++ b/components/commonUI/TreeDrawerPicker.vue
@@ -0,0 +1,195 @@
+<!--展示树结构的抽屉选择器-->
+<template>
+	<view class="bg-gradual-blue">
+		<!-- <scroll-view scroll-y class="DrawerPage" :class="showDrawer?'show':''">
+			<view class='padding margin text-center'>
+				<view class='cu-btn bg-green lg block shadow radius margin' @tap="showModal" data-target="viewModal">
+					选择机组
+				</view>
+			</view>
+		</scroll-view> -->
+		<!--选择机组相关的抽屉-->
+		<scroll-view scroll-y class="DrawerWindow" :class="showDrawer?'show':''"
+			style="height:100%;back-ground-color:red;">
+			<view cclass="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg">
+				<view class="cu-bar bg-grey solid-bottom margin-top-sm">
+					<view class="action text-white">
+						<text>{{title}}</text>
+						<text class="text-red margin-left">{{dataList ? dataList.length:0}}</text>
+						<text>个</text>
+					</view>
+				</view>
+				<scroll-view scroll-y class="bg-white" style="max-height: calc(100vh);">
+					<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
+						<view class="cu-item arrow" v-for="(item,index) in dataList" :key="index">
+							<view class="content" @tap="tabSelect(item)">
+								<text class="text-grey">🏭</text>
+								<text class="text-grey">{{item.name}}</text>
+								<view class="solid-bottom text-xs">
+									<text class="text-gray">{{totalTitle}}:</text>
+									<view class="cu-tag badge bg-cyan">{{item.children?item.children.length:0}}</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<view class="DrawerClose" :class="showDrawer?'show':''" @tap="hideModal">
+					<text class="cuIcon-pullright"></text>
+				</view>
+			</view>
+
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'DrawerPicker',
+		props: {
+			// 表单项配置数组
+			title: {
+				type: String,
+				default: () => 'Demo标题'
+			},
+			totalTitle: {
+				type: String,
+				default: () => 'total标题'
+			},
+			// 表单项配置数组
+			dataList: {
+				type: Array,
+				default: () => []
+			},
+			showDrawer: {
+				type: Boolean,
+				default: () => false
+			},
+		},
+		emits: ['on-select', 'on-hiden'],
+		watch: {
+
+		},
+		data() {
+			return {
+				modalName: null,
+			};
+		},
+		methods: {
+			hideModal(e) {
+				this.$emit('on-hiden', false);
+			},
+			tabSelect(item) {
+				this.$emit('on-select', {
+					...item
+				});
+			}
+		},
+	}
+</script>
+
+<style>
+	page {
+		background-image: var(--gradualBlue);
+		width: 100vw;
+		overflow: hidden;
+	}
+
+	.DrawerPage {
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		left: 0vw;
+		background-color: #f1f1f1;
+		transition: all 0.4s;
+	}
+
+	.DrawerPage.show {
+		transform: scale(0.9, 0.9);
+		left: 85vw;
+		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
+		transform-origin: 0;
+	}
+
+	.DrawerWindow {
+		position: absolute;
+		width: 85vw;
+		height: 100vh;
+		left: 0;
+		top: 0;
+		transform: scale(0.9, 0.9) translateX(-100%);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+		padding: 100upx 0;
+	}
+
+	.DrawerWindow.show {
+		transform: scale(1, 1) translateX(0%);
+		opacity: 1;
+		pointer-events: all;
+	}
+
+	.DrawerClose {
+		position: absolute;
+		width: 40vw;
+		height: 100vh;
+		right: 0;
+		top: 0;
+		color: transparent;
+		padding-bottom: 30upx;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
+		letter-spacing: 5px;
+		font-size: 50upx;
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.4s;
+	}
+
+	.DrawerClose.show {
+		opacity: 1;
+		pointer-events: all;
+		width: 15vw;
+		color: #fff;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action button.cuIcon {
+		width: 64upx;
+		height: 64upx;
+		line-height: 64upx;
+		margin: 0;
+		display: inline-block;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+		margin: 0;
+	}
+
+	.DrawerPage .nav {
+		flex: 1;
+	}
+
+	.DrawerPage .nav .cu-item.cur {
+		border-bottom: 0;
+		position: relative;
+	}
+
+	.DrawerPage .nav .cu-item.cur::after {
+		content: "";
+		width: 10upx;
+		height: 10upx;
+		background-color: currentColor;
+		position: absolute;
+		bottom: 10upx;
+		border-radius: 10upx;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+
+	.DrawerPage .cu-bar.tabbar .action {
+		flex: initial;
+	}
+</style>
\ No newline at end of file
diff --git a/components/proQuery/proQuery.vue b/components/proQuery/proQuery.vue
new file mode 100644
index 0000000..c76bf2a
--- /dev/null
+++ b/components/proQuery/proQuery.vue
@@ -0,0 +1,197 @@
+<template>
+	<view class="pro-query">
+		<form @submit="formSubmit" @reset="formReset">
+			<!-- 循环渲染表单项 -->
+			<view class="cu-form-group" :class="{'margin-top': index === 0}" v-for="(item, index) in visibleItems"
+				:key="item.key">
+				<view class="title">{{ item.label }}</view>
+
+				<!-- 输入框 -->
+				<input v-if="item.type === 'input'" :placeholder="item.placeholder || '请输入'" :name="item.key"
+					v-model="formData[item.key]" :disabled="item.disabled || false" />
+
+				<!-- 多行文本框 -->
+				<textarea v-else-if="item.type === 'textarea'" :placeholder="item.placeholder || '请输入'"
+					v-model="formData[item.key]" :disabled="item.disabled || false"></textarea>
+
+				<!-- 数字输入框 -->
+				<input v-else-if="item.type === 'number'" type="number" :placeholder="item.placeholder || '请输入'"
+					v-model="formData[item.key]" :disabled="item.disabled || false" />
+
+				<!-- 下拉选择（picker） -->
+				<picker v-else-if="item.type === 'select'"
+					@change="(e) => { formData[item.key] = item.options[e.detail.value].value }" :range="item.options"
+					range-key="text" :disabled="item.disabled || false">
+					<view class="picker">
+						{{ formData[item.key] ? getOptionText(item.options, formData[item.key]) : '请选择' }}
+					</view>
+				</picker>
+
+				<!-- 开关 -->
+				<switch v-else-if="item.type === 'switch'" :checked="formData[item.key]"
+					@change="(e) => { formData[item.key] = e.detail.value }"
+					:class="formData[item.key] ? 'checked' : ''" :disabled="item.disabled || false"></switch>
+
+				<!-- 单选组 -->
+				<radio-group v-else-if="item.type === 'radio'" @change="(e) => { formData[item.key] = e.detail.value }">
+					<radio v-for="opt in item.options" :key="opt.value" :value="opt.value"
+						:checked="formData[item.key] === opt.value"
+						:class="formData[item.key] === opt.value ? 'checked' : ''" :disabled="item.disabled || false">
+						{{ opt.text }}
+					</radio>
+				</radio-group>
+
+				<!-- 复选组 -->
+				<checkbox-group v-else-if="item.type === 'checkbox'"
+					@change="(e) => { formData[item.key] = e.detail.value }">
+					<checkbox v-for="opt in item.options" :key="opt.value" :value="opt.value"
+						:checked="formData[item.key] && formData[item.key].includes(opt.value)"
+						:class="formData[item.key] && formData[item.key].includes(opt.value) ? 'checked' : ''"
+						:disabled="item.disabled || false">{{ opt.text }}</checkbox>
+				</checkbox-group>
+
+				<!-- 日期选择 -->
+				<picker v-else-if="item.type === 'datePicker'" mode="date" :value="formData[item.key]"
+					@change="(e) => { formData[item.key] = e.detail.value }" :disabled="item.disabled || false">
+					<view class="picker">{{ formData[item.key] || '选择日期' }}</view>
+				</picker>
+
+				<!-- 时间选择 -->
+				<picker v-else-if="item.type === 'timePicker'" mode="time" :value="formData[item.key]"
+					@change="(e) => { formData[item.key] = e.detail.value }" :disabled="item.disabled || false">
+					<view class="picker">{{ formData[item.key] || '选择时间' }}</view>
+				</picker>
+
+				<!-- 自定义插槽 -->
+				<slot v-else-if="item.type === 'custom'" :name="item.customRender" :data="formData"></slot>
+
+				<!-- 默认 fallback -->
+				<input v-else :placeholder="item.placeholder || '请输入'" v-model="formData[item.key]" />
+			</view>
+			<!-- 操作按钮 -->
+			<view class="padding flex justify-between cu-form-group">
+				<view class="flex">
+					<button class="cu-btn block bg-blue margin-tb-sm md" form-type="submit" :disabled="isLoading">
+						<view class="flex align-center justify-center">
+							<!-- 加载旋转动画 -->
+							<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin"></text>
+							<text>{{ isLoading ? '提交中...' : submitText }}</text>
+						</view>
+					</button>
+					<button class="cu-btn block line-blue margin-tb-sm md" @click="formReset"
+						style="margin-left: 20rpx;">重置</button>
+					<!-- <button class="cu-btn block line-blue margin-tb-sm lg" form-type="reset" style="margin-left: 20rpx;">重置</button> -->
+				</view>
+				<view v-if="more" class="flex">
+					<view class="cu-btn line-blue" @click="hiddenHandle">
+						{{ hidden ? '展开' : '收起' }}
+					</view>
+				</view>
+			</view>
+		</form>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'ProQuery',
+		props: {
+			// 表单项配置数组
+			searchParam: {
+				type: Array,
+				default: () => []
+			},
+			submitText: {
+				type: String,
+				default: () => '查询'
+			},
+		},
+		emits: ['on-search', 'on-reset'],
+		data() {
+			return {
+				formData: {}, // 表单数据对象
+				hidden: true, // 是否隐藏有 hidden 标记的项
+				more: false, // 是否有隐藏项
+				isLoading: false, //加载状态
+			};
+		},
+		computed: {
+			// 根据 hidden 状态过滤可见项
+			visibleItems() {
+				if (this.hidden) {
+					return this.searchParam.filter(item => !item.hidden);
+				}
+				return this.searchParam;
+			},
+		},
+		watch: {
+			searchParam: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal && newVal.length) {
+						// 初始化 formData
+						const data = {};
+						let hasHidden = false;
+						newVal.forEach(item => {
+							data[item.key] = item.defaultValue ?? '';
+							if (item.hidden) hasHidden = true;
+						});
+						this.formData = data;
+						this.more = hasHidden;
+					}
+				}
+			}
+		},
+		methods: {
+			// 获取 select 选项的显示文本
+			getOptionText(options, value) {
+				const found = options.find(opt => opt.value === value);
+				return found ? found.text : '';
+			},
+			// 提交事件
+			// formSubmit(e) {
+			// 	// 如果使用原生表单，e.detail.value 包含所有 name 字段，但我们已经使用 v-model，直接传 formData
+			// 	this.$emit('on-search', {
+			// 		...this.formData
+			// 	});
+			// },
+			// ★★★ 修改提交方法：增加加载控制 ★★★
+			formSubmit(e) {
+				if (this.isLoading) return;// 防止重复提交
+				this.isLoading = true;
+				// 定义完成回调，父组件异步处理结束后必须调用
+				const done = () => {
+					this.isLoading = false;
+				};
+				// 将表单数据和 done 回调一并传递给父组件
+				this.$emit('on-search', {
+					...this.formData
+				}, done);
+			},
+			// 重置事件
+			formReset(e) {
+				if (e) e.preventDefault();
+				const data = {};
+				this.searchParam.forEach(item => {
+					data[item.key] = item.defaultValue != null ? item.defaultValue : '';
+				});
+				this.formData = data;
+				this.isLoading = false; // 强制重置加载状态，避免卡死
+				this.$emit('on-reset');
+			},
+			// 展开/收起切换
+			hiddenHandle() {
+				this.hidden = !this.hidden;
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	/* 保留文件1中关于标题宽度的样式 */
+	.cu-form-group .title {
+		min-width: calc(4em + 15px);
+	}
+
+	/* 其它 ColorUI 样式已在全局引入，此处无需重复定义 */
+</style>
\ No newline at end of file