style: 模具台账搜索框样式优化

src/api/mes/product.js

@@ -23,3 +23,11 @@ export function getItemList() {
     method: 'get'
   })
 }
+
+// 产品简单列表（用于下拉选择）
+export function getMesProductSimpleList() {
+  return request({
+    url: '/admin-api/erp/product/simple-list-product',
+    method: 'get'
+  })
+}

src/locales/en-US.js

@@ -526,7 +526,8 @@ export default {
     empty: 'No equipment inspection tasks',
     createTicketSuccess: 'Work order created successfully',
     createTicketFail: 'Work order creation failed',
-    lineFilter: 'Line',
  },
+    lineFilter: 'Line',
+  },
   equipmentInspectionRecord: {
     moduleName: 'Equipment Inspection Records',
     subTitle: 'Equipment inspection record list',
@@ -998,8 +999,10 @@ export default {
     statusDocumentFinished: 'Finished',
     moreFilter: 'More Filters',
     statusFilter: 'Status Filters',
-    dateFilter: 'Date Filters',
    placeholderRepairCode: 'Enter repair order no.',
+    dateFilter: 'Date Filters',
-    placeholderRepairName: 'Enter repair order name',
    placeholderRequireStartDate: 'Report start date',
+    placeholderRepairCode: 'Enter repair order no.',
+    placeholderRepairName: 'Enter repair order name',
+    placeholderRequireStartDate: 'Report start date',
     placeholderRequireEndDate: 'Report end date',
     placeholderFinishStartDate: 'Completion start date',
     placeholderFinishEndDate: 'Completion end date',
@@ -1142,6 +1145,12 @@ export default {
     createTime: 'Created At',
     confirmDeleteContent: 'Confirm delete mold brand "{name}"?',
     empty: 'No mold ledger data',
+    moreFilter: 'More Filters',
+    allStatus: 'Mold Status',
+    productModel: 'Product Model',
+    placeholderProductModel: 'Enter product model',
+    currentDevice: 'Current Device',
+    placeholderCurrentDevice: 'Enter current device',
     scanUnrecognized: 'Unrecognized QR code',
     scanFormatError: 'Invalid QR code format',
     scanFailed: 'Scan failed',

src/locales/zh-CN.js

@@ -526,7 +526,8 @@ export default {
     empty: '暂无设备点检任务数据',
     createTicketSuccess: '工单创建成功',
     createTicketFail: '工单创建失败',
-    lineFilter: '产线',
  },
+    lineFilter: '产线',
+  },
   equipmentInspectionRecord: {
     moduleName: '设备点检记录',
     subTitle: '设备点检记录查询',
@@ -999,8 +1000,10 @@ export default {
     statusDocumentFinished: '已完成',
     moreFilter: '更多筛选',
     statusFilter: '状态筛选',
-    dateFilter: '日期筛选',
    placeholderRepairCode: '请输入维修单编号',
+    dateFilter: '日期筛选',
-    placeholderRepairName: '请输入维修单名称',
    placeholderRequireStartDate: '报修开始日期',
+    placeholderRepairCode: '请输入维修单编号',
+    placeholderRepairName: '请输入维修单名称',
+    placeholderRequireStartDate: '报修开始日期',
     placeholderRequireEndDate: '报修结束日期',
     placeholderFinishStartDate: '完成开始日期',
     placeholderFinishEndDate: '完成结束日期',
@@ -1143,6 +1146,12 @@ export default {
     createTime: '创建时间',
     confirmDeleteContent: '确认删除模具组"{name}"吗？',
     empty: '暂无模具台账数据',
+    moreFilter: '更多筛选',
+    allStatus: '模具状态',
+    productModel: '产品型号',
+    placeholderProductModel: '请输入产品型号',
+    currentDevice: '当前设备',
+    placeholderCurrentDevice: '请输入当前设备',
     scanUnrecognized: '无法识别二维码',
     scanFormatError: '二维码格式不正确',
     scanFailed: '扫描失败',

src/pages_function/pages/moldLedger/index.vue

@@ -3,25 +3,33 @@
     <NavBar :title="t('moldLedger.moduleName')" />
 
     <view class="filter-bar">
-      <view class="keyword-box">
+      <view class="filter-row quick-row">
-        <input
+        <picker :range="statusPickerLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
-          id="mold-ledger-keyword-input"
+          <view class="status-filter">
-          v-model="searchKeyword"
+            <text :class="['status-filter-text', selectedStatus === '' ? 'placeholder' : '']">{{ selectedStatusLabel }}</text>
-          class="keyword-input"
+            <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
-          type="text"
+          </view>
-          :placeholder="t('moldLedger.searchPlaceholder')"
+        </picker>
-          placeholder-class="placeholder"
-          :focus="keywordFocus"
-          confirm-type="search"
-          @blur="keywordFocus = false"
-          @confirm="handleSearch"
-        />
       </view>
-      <view class="status-box" @click="openStatusPicker">
+      <view class="filter-row search-row">
-        <text class="status-box-text">{{ selectedStatusLabel || t('moldLedger.allStatus') }}</text>
+        <view class="keyword-wrap">
-        <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+          <input
+            id="mold-ledger-keyword-input"
+            v-model="searchKeyword"
+            class="keyword-input"
+            type="text"
+            :placeholder="t('moldLedger.searchPlaceholder')"
+            confirm-type="search"
+            @confirm="handleSearch"
+          />
+        </view>
+        <view class="icon-filter-btn" @click="resetFilters">
+          <uni-icons type="refresh" size="24" color="#7b8491"></uni-icons>
+        </view>
+        <view class="icon-filter-btn" @click="openFilterDrawer">
+          <uni-icons type="settings" size="24" color="#7b8491"></uni-icons>
+        </view>
       </view>
-      <view class="reset-filter-btn" @click="resetFilters">{{ t('common.reset') }}</view>
     </view>
 
     <scroll-view
@@ -70,43 +78,78 @@
       <text class="go-top-icon">↑</text>
     </view>
 
-    <uni-popup ref="statusPickerRef" type="bottom" background-color="#fff">
+    <uni-popup ref="filterPopupRef" class="mold-filter-popup" type="right" background-color="transparent" :animation="false">
-      <view class="picker-content">
+      <view class="filter-drawer">
-        <view class="picker-header">
+        <view class="drawer-header">
-          <text class="picker-title">{{ t('moldLedger.selectMoldStatus') }}</text>
+          <text class="drawer-title">{{ t('moldLedger.moreFilter') }}</text>
-          <view class="picker-clear" @click="resetStatus">
-            <text class="picker-clear-text">{{ t('moldLedger.clear') }}</text>
-          </view>
         </view>
-        <scroll-view scroll-y class="picker-list">
+        <scroll-view scroll-y class="drawer-body">
-          <view
+          <view class="drawer-section">
-            v-for="option in statusOptions"
+            <view class="drawer-section-head">
-            :key="String(option.value)"
+              <text class="drawer-section-title">{{ t('moldLedger.basicInfo') }}</text>
-            class="picker-item"
+            </view>
-            @click="selectStatus(option)"
+            <view class="drawer-grid">
-          >
+              <view class="drawer-field">
-            <text class="picker-text">{{ option.label }}</text>
+                <text class="drawer-label">{{ t('moldLedger.productModel') }}</text>
-            <text v-if="selectedStatus === option.value" class="picker-check">✓</text>
+                <view class="drawer-picker" @click="toggleProductPanel">
+                  <text :class="['drawer-picker-text', selectedProductIds.length === 0 ? 'placeholder' : '']">{{ selectedProductLabel }}</text>
+                  <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+                </view>
+                <scroll-view v-if="productPanelOpen" scroll-y class="drawer-option-panel">
+                  <view
+                    v-for="item in productOptions"
+                    :key="item.id"
+                    :class="['drawer-option-item', selectedProductIds.includes(item.id) ? 'active' : '']"
+                    @click="selectProduct(item)"
+                  >
+                    <text class="drawer-option-text">{{ item.name }}</text>
+                    <text v-if="selectedProductIds.includes(item.id)" class="drawer-option-check">✓</text>
+                  </view>
+                </scroll-view>
+              </view>
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('moldLedger.currentDevice') }}</text>
+                <view class="drawer-picker" @click="toggleDevicePanel">
+                  <text :class="['drawer-picker-text', !selectedCurrentDevice ? 'placeholder' : '']">{{ selectedDeviceLabel }}</text>
+                  <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+                </view>
+                <scroll-view v-if="devicePanelOpen" scroll-y class="drawer-option-panel">
+                  <view
+                    v-for="item in deviceOptions"
+                    :key="item.id"
+                    :class="['drawer-option-item', selectedCurrentDevice === item.deviceName ? 'active' : '']"
+                    @click="selectDevice(item)"
+                  >
+                    <text class="drawer-option-text">{{ item.deviceName }}（{{ item.deviceCode }}）</text>
+                    <text v-if="selectedCurrentDevice === item.deviceName" class="drawer-option-check">✓</text>
+                  </view>
+                </scroll-view>
+              </view>
+            </view>
           </view>
         </scroll-view>
+        <view class="drawer-actions">
+          <view class="drawer-action reset" @click="resetFilters">{{ t('functionCommon.reset') }}</view>
+          <view class="drawer-action confirm" @click="confirmFilterDrawer">{{ t('functionCommon.confirm') }}</view>
+        </view>
       </view>
     </uni-popup>
 
-    <sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
   </view>
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed } from 'vue'
-import { onLoad, onReady } from '@dcloudio/uni-app'
+import { onLoad } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import NavBar from '@/components/common/NavBar.vue'
-import CopyButton from '@/components/common/CopyButton.vue'
 import { deleteMoldBrand, getMoldBrandPage } from '@/api/mes/mold'
+import { getMesProductSimpleList } from '@/api/mes/product'
+import { getDeviceLedgerList } from '@/api/mes/deviceLedger'
 import { DICT_TYPE, getDictLabel, initAllDict } from '@/utils/dict'
 
 const { t } = useI18n()
-const statusPickerRef = ref(null)
+const filterPopupRef = ref(null)
 const list = ref([])
 const loading = ref(false)
 const loadingMore = ref(false)
@@ -115,12 +158,16 @@ const pageNo = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 const searchKeyword = ref('')
-const selectedStatus = ref(undefined)
+const selectedStatus = ref('')
+const productOptions = ref([])
+const deviceOptions = ref([])
+const selectedProductIds = ref([])
+const selectedCurrentDevice = ref('')
+// 面板开关
+const productPanelOpen = ref(false)
+const devicePanelOpen = ref(false)
 const scrollTop = ref(0)
 const showGoTop = ref(false)
-const keywordFocus = ref(false)
-const focusNoKeyboardRef = ref(null)
-const keywordInputSelector = '#mold-ledger-keyword-input input, input#mold-ledger-keyword-input'
 
 const statusOptions = computed(() => {
   const options = []
@@ -133,64 +180,102 @@ const statusOptions = computed(() => {
   return options
 })
 
+const statusPickerLabels = computed(() => statusOptions.value.map((item) => item.label))
+const statusPickerIndex = computed(() => {
+  const idx = statusOptions.value.findIndex((item) => String(item.value) === String(selectedStatus.value))
+  return idx >= 0 ? idx : 0
+})
 const selectedStatusLabel = computed(() => {
+  if (selectedStatus.value === '') return t('moldLedger.allStatus')
   const current = statusOptions.value.find((item) => item.value === selectedStatus.value)
-  return current ? current.label : ''
+  return current ? current.label : t('moldLedger.allStatus')
+})
+
+const selectedProductLabel = computed(() => {
+  if (selectedProductIds.value.length === 0) return t('moldLedger.productModel')
+  const names = productOptions.value
+    .filter((p) => selectedProductIds.value.includes(p.id))
+    .map((p) => p.name)
+  return names.join(', ') || t('moldLedger.productModel')
+})
+
+const selectedDeviceLabel = computed(() => {
+  if (!selectedCurrentDevice.value) return t('moldLedger.currentDevice')
+  const found = deviceOptions.value.find((d) => d.deviceName === selectedCurrentDevice.value)
+  return found ? `${found.deviceName}（${found.deviceCode}）` : selectedCurrentDevice.value
 })
 
 onLoad(async () => {
   await initAllDict()
+  await Promise.all([fetchProductOptions(), fetchDeviceOptions()])
   await fetchList(true)
 })
 
-onReady(() => {
+async function fetchProductOptions() {
-  focusKeywordNoKeyboard()
+  try {
-})
+    const res = await getMesProductSimpleList()
+    const root = res && res.data !== undefined ? res.data : res
+    productOptions.value = Array.isArray(root) ? root : (root?.data || [])
+  } catch { productOptions.value = [] }
+}
 
-function activateKeywordFocus() {
+async function fetchDeviceOptions() {
-  keywordFocus.value = false
+  try {
-  nextTick(() => {
+    const res = await getDeviceLedgerList()
-    keywordFocus.value = true
+    const root = res && res.data !== undefined ? res.data : res
-  })
+    deviceOptions.value = Array.isArray(root) ? root : (root?.data || [])
+  } catch { deviceOptions.value = [] }
 }
 
-function focusKeywordNoKeyboard() {
+function onStatusFilterChange(event) {
-  nextTick(() => {
+  const index = Number(event?.detail?.value || 0)
-    setTimeout(() => {
+  const current = statusOptions.value[index]
-      focusNoKeyboardRef.value?.focus(keywordInputSelector)
+  selectedStatus.value = current ? current.value : ''
-    }, 80)
+  fetchList(true)
-  })
 }
 
-async function handleSearch() {
+function openFilterDrawer() {
-  await fetchList(true)
+  filterPopupRef.value?.open()
 }
 
-async function clearSearch() {
+function toggleProductPanel() {
-  searchKeyword.value = ''
+  productPanelOpen.value = !productPanelOpen.value
-  await fetchList(true)
+  devicePanelOpen.value = false
 }
 
-async function resetFilters() {
+function toggleDevicePanel() {
-  searchKeyword.value = ''
+  devicePanelOpen.value = !devicePanelOpen.value
-  selectedStatus.value = undefined
+  productPanelOpen.value = false
-  activateKeywordFocus()
+}
-  await fetchList(true)
+
+function selectProduct(item) {
+  const idx = selectedProductIds.value.indexOf(item.id)
+  if (idx >= 0) {
+    selectedProductIds.value.splice(idx, 1)
+  } else {
+    selectedProductIds.value.push(item.id)
+  }
 }
 
-function openStatusPicker() {
+function selectDevice(item) {
-  statusPickerRef.value?.open()
+  selectedCurrentDevice.value = item.deviceName
+  devicePanelOpen.value = false
 }
 
-async function selectStatus(option) {
+function confirmFilterDrawer() {
-  selectedStatus.value = option.value
+  filterPopupRef.value?.close()
-  statusPickerRef.value?.close()
+  fetchList(true)
+}
+
+async function resetFilters() {
+  searchKeyword.value = ''
+  selectedStatus.value = ''
+  selectedProductIds.value = []
+  selectedCurrentDevice.value = ''
   await fetchList(true)
 }
 
-async function resetStatus() {
+async function handleSearch() {
-  selectedStatus.value = undefined
-  statusPickerRef.value?.close()
   await fetchList(true)
 }
 
@@ -217,7 +302,12 @@ async function fetchList(reset) {
       pageSize: pageSize.value,
       code: keyword || undefined,
       name: keyword || undefined,
-      status: selectedStatus.value
+      status: selectedStatus.value,
+      productIds: selectedProductIds.value.length ? selectedProductIds.value : undefined,
+      productName: selectedProductIds.value.length
+        ? productOptions.value.filter((p) => selectedProductIds.value.includes(p.id)).map((p) => p.name).join(',')
+        : undefined,
+      currentDevice: selectedCurrentDevice.value || undefined
     })
     const page = normalizePageData(res)
     total.value = page.total
@@ -342,56 +432,80 @@ function formatDateTime(value) {
 }
 
 .filter-bar {
-  display: grid;
+  padding: 18rpx 14rpx 20rpx;
-  grid-template-columns: minmax(0, 1fr) 150rpx 96rpx;
+  background: #f3f4f6;
+}
+
+.filter-row {
+  display: flex;
   align-items: center;
-  gap: 14rpx;
+  gap: 18rpx;
-  padding: 18rpx 28rpx 20rpx;
 }
 
-.keyword-box,
+.search-row {
-.status-box,
+  margin-top: 18rpx;
-.reset-filter-btn {
+}
+
+.quick-row > picker {
+  min-width: 0;
+  flex: 1;
+}
+
+.keyword-wrap,
+.status-filter,
+.icon-filter-btn {
   height: 66rpx;
-  background: #ffffff;
   border: 1rpx solid #d9dde5;
+  background: #ffffff;
   box-sizing: border-box;
-  display: flex;
-  align-items: center;
 }
 
-.keyword-box {
+.keyword-wrap {
-  padding: 0 20rpx;
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
 }
 
 .keyword-input {
   width: 100%;
+  height: 64rpx;
+  padding: 0 20rpx;
   font-size: 26rpx;
   color: #374151;
 }
 
-.status-box {
+.status-filter {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 0 18rpx;
+  padding: 0 18rpx 0 26rpx;
 }
 
-.status-box-text,
+.status-filter-text {
-.placeholder {
+  min-width: 0rpx;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 26rpx;
-}
-
-.status-box-text {
   color: #374151;
 }
 
-.placeholder {
+.status-filter-text.placeholder {
   color: #a8adb7;
 }
 
-.reset-filter-btn {
+.icon-filter-btn {
+  width: 66rpx;
+  flex: 0 0 66rpx;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  font-size: 24rpx;
+  border-color: transparent;
-  color: #4b5563;
+  background: transparent;
 }
 
 .content-scroll {
@@ -537,48 +651,211 @@ function formatDateTime(value) {
   font-size: 32rpx;
 }
 
-.picker-content {
+// 筛选抽屉
-  padding: 24rpx 24rpx 36rpx;
+::deep(.mold-filter-popup.right .uni-popup__content-transition) {
-  border-radius: 28rpx 28rpx 0 0;
+  transform: none !important;
+}
+
+.filter-drawer {
+  width: 630rpx;
+  height: calc(100vh - var(--status-bar-height));
+  margin-top: var(--status-bar-height);
+  background: #f5f5f7;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 28rpx 0 0 28rpx;
+}
+
+.drawer-header {
+  height: 104rpx;
+  padding: 18rpx 34rpx 0;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+}
+
+.drawer-title {
+  color: #1f2937;
+  font-size: 34rpx;
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.drawer-body {
+  flex: 1;
+  min-height: 0;
+  padding-bottom: 40rpx;
+  box-sizing: border-box;
+}
+
+.drawer-section {
+  margin-bottom: 18rpx;
+  padding: 28rpx 28rpx 30rpx;
+  border-radius: 24rpx;
+  background: #ffffff;
+  box-sizing: border-box;
 }
 
-.picker-header {
+.drawer-section-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20rpx;
+  margin-bottom: 24rpx;
 }
 
-.picker-title {
+.drawer-section-title {
-  color: #1f2d3d;
+  font-size: 32rpx;
-  font-size: 30rpx;
+  line-height: 1.3;
+  color: #1f2937;
   font-weight: 700;
 }
 
-.picker-clear-text {
+.drawer-grid {
-  color: #1f61ff;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22rpx 20rpx;
+}
+
+.drawer-field {
+  min-width: 0;
+}
+
+.drawer-field-wide {
+  grid-column: 1 / -1;
+}
+
+.drawer-label {
+  display: block;
+  margin-bottom: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.3;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.drawer-input,
+.drawer-picker {
+  width: 100%;
+  min-height: 74rpx;
+  border: 0;
+  border-radius: 8rpx;
+  background: #f7f8fb;
+  box-sizing: border-box;
+}
+
+.drawer-input {
+  height: 74rpx;
+  padding: 0 18rpx;
   font-size: 26rpx;
+  color: #111827;
+  text-align: center;
+}
+
+.drawer-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 18rpx;
+  gap: 8rpx;
+}
+
+.drawer-picker-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 26rpx;
+  color: #111827;
+  text-align: center;
 }
 
-.picker-list {
+.drawer-picker-text.placeholder {
-  max-height: 480rpx;
+  color: #9ca3af;
+}
+
+.drawer-option-panel {
+  max-height: 360rpx;
+  margin-top: 12rpx;
+  border-radius: 12rpx;
+  background: #f7f8fb;
+  overflow: hidden;
 }
 
-.picker-item {
+.drawer-option-item {
+  min-height: 72rpx;
+  padding: 0 24rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 26rpx 6rpx;
+  border-bottom: 1rpx solid #eceff3;
-  border-bottom: 1rpx solid #edf1f6;
+  box-sizing: border-box;
+}
+
+.drawer-option-item:last-child {
+  border-bottom: 0;
+}
+
+.drawer-option-item.active {
+  background: rgba(23, 75, 120, 0.1);
 }
 
-.picker-text {
+.drawer-option-item.active .drawer-option-text {
-  color: #243447;
+  color: #174b78;
+  font-weight: 600;
+}
+
+.drawer-option-text {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 26rpx;
+  color: #1f2937;
+}
+
+.drawer-option-check {
+  flex-shrink: 0;
   font-size: 28rpx;
+  color: #174b78;
+  margin-left: 16rpx;
 }
 
-.picker-check {
+.drawer-actions {
-  color: #1f61ff;
+  height: 126rpx;
-  font-size: 30rpx;
+  padding: 18rpx 28rpx 24rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  background: #ffffff;
+  box-shadow: 0 -8rpx 24rpx rgba(17, 24, 39, 0.06);
+}
+
+.drawer-action {
+  flex: 1;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 600;
+  border: 2rpx solid #174b78;
+  box-sizing: border-box;
+}
+
+.drawer-action.reset {
+  border-radius: 12rpx 0 0 12rpx;
+  background: #ffffff;
+  color: #174b78;
+}
+
+.drawer-action.confirm {
+  border-radius: 0 12rpx 12rpx 0;
+  background: #174b78;
+  color: #ffffff;
 }
 </style>