李红攀：V2.0.001小程序的采摘管理

src/pages-erp/pick-broccoli/components/search-form.vue

@@ -0,0 +1,126 @@
+<template>
+  <!-- 搜索框入口 -->
+  <view @click="visible = true">
+    <wd-search :placeholder="placeholder" hide-cancel disabled />
+  </view>
+
+  <!-- 搜索弹窗 -->
+  <wd-popup v-model="visible" position="top" @close="visible = false">
+    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          采摘编号
+        </view>
+        <wd-input
+          v-model="formData.pickCode"
+          placeholder="请输入采摘编号"
+          clearable
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          采摘人员
+        </view>
+        <wd-input
+          v-model="formData.userName"
+          placeholder="请输入采摘人员姓名"
+          clearable
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          状态
+        </view>
+        <wd-radio-group v-model="formData.status" shape="button">
+          <wd-radio :value="-1">
+            全部
+          </wd-radio>
+          <wd-radio :value="1">
+            已采摘
+          </wd-radio>
+          <wd-radio :value="2">
+            已装框
+          </wd-radio>
+          <wd-radio :value="3">
+            已装车
+          </wd-radio>
+          <wd-radio :value="4">
+            已入库
+          </wd-radio>
+        </wd-radio-group>
+      </view>
+      <view class="yd-search-form-actions">
+        <wd-button class="flex-1" plain @click="handleReset">
+          重置
+        </wd-button>
+        <wd-button class="flex-1" type="primary" @click="handleSearch">
+          搜索
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue'
+import { getNavbarHeight } from '@/utils'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  pickCode: undefined as string | undefined,
+  userName: undefined as string | undefined,
+  status: -1,
+})
+
+const statusMap: Record<number, string> = {
+  1: '已采摘',
+  2: '已装框',
+  3: '已装车',
+  4: '已入库',
+}
+
+/** 搜索条件 placeholder 拼接 */
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.pickCode) {
+    conditions.push(`编号:${formData.pickCode}`)
+  }
+  if (formData.userName) {
+    conditions.push(`人员:${formData.userName}`)
+  }
+  if (formData.status !== -1) {
+    conditions.push(`状态:${statusMap[formData.status] || formData.status}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索采摘记录'
+})
+
+/** 搜索 */
+function handleSearch() {
+  visible.value = false
+  const params: Record<string, any> = {}
+  if (formData.pickCode) {
+    params.pickCode = formData.pickCode
+  }
+  if (formData.userName) {
+    params.userName = formData.userName
+  }
+  if (formData.status !== -1) {
+    params.status = formData.status
+  }
+  emit('search', params)
+}
+
+/** 重置 */
+function handleReset() {
+  formData.pickCode = undefined
+  formData.userName = undefined
+  formData.status = -1
+  visible.value = false
+  emit('reset')
+}
+</script>