style：筛选框样式优化

src/locales/en-US.js

@@ -993,8 +993,17 @@ export default {
     statusPending: 'Pending Repair',
     statusPassed: 'Passed',
     statusRejected: 'Rejected',
-    placeholderRepairCode: 'Enter repair order no.',
+    statusDocumentPending: 'Pending',
-    placeholderRepairName: 'Enter repair order name',
+    statusDocumentFinished: 'Finished',
+    moreFilter: 'More Filters',
+    statusFilter: 'Status Filters',
+    dateFilter: 'Date Filters',
    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',
+    placeholderConfirmStartDate: 'Acceptance start date',
+    placeholderConfirmEndDate: 'Acceptance end date',
     placeholderRequireDate: 'Select report date',
     placeholderAcceptedBy: 'Select repair technician',
     placeholderConfirmBy: 'Select inspector',

src/locales/zh-CN.js

@@ -994,8 +994,17 @@ export default {
     statusPending: '待维修',
     statusPassed: '通过',
     statusRejected: '不通过',
-    placeholderRepairCode: '请输入维修单编号',
+    statusDocumentPending: '待完成',
-    placeholderRepairName: '请输入维修单名称',
+    statusDocumentFinished: '已完成',
+    moreFilter: '更多筛选',
+    statusFilter: '状态筛选',
+    dateFilter: '日期筛选',
    placeholderRepairCode: '请输入维修单编号',
+    placeholderRepairName: '请输入维修单名称',
    placeholderRequireStartDate: '报修开始日期',
+    placeholderRequireEndDate: '报修结束日期',
+    placeholderFinishStartDate: '完成开始日期',
+    placeholderFinishEndDate: '完成结束日期',
+    placeholderConfirmStartDate: '验收开始日期',
+    placeholderConfirmEndDate: '验收结束日期',
     placeholderRequireDate: '请选择报修日期',
     placeholderAcceptedBy: '请选择维修人员',
     placeholderConfirmBy: '请选择验收人员',

src/pages_function/pages/equipmentLedger/index.vue

@@ -75,7 +75,7 @@
       <uni-icons type="top" size="22" color="#ffffff"></uni-icons>
     </view>
 
-    <uni-popup ref="filterPopupRef" class="equipment-filter-popup" type="right" background-color="#ffffff"
+    <uni-popup ref="filterPopupRef" class="equipment-filter-popup" type="right" background-color="transparent"
       :animation="false">
       <view class="filter-drawer">
         <view class="drawer-header">
@@ -777,7 +777,8 @@ function formatDateValue(value) {
 
 .filter-drawer {
   width: 630rpx;
-  height: 100vh;
+  height: calc(100vh - var(--status-bar-height));
+  margin-top: var(--status-bar-height);
   background: #f5f5f7;
   display: flex;
   flex-direction: column;

src/pages_function/pages/equipmentMaintenance/index.vue

@@ -3,29 +3,38 @@
     <NavBar :title="t('equipmentMaintenance.moduleName')" />
 
     <view class="filter-bar">
-      <view class="line-filter" @click="openLineCascader">
+      <view class="filter-row quick-row">
-        <text :class="['line-filter-text', selectedLineId === '' ? 'placeholder' : '']">{{ selectedLineLabel }}</text>
+        <view class="line-filter" @click="openLineCascader">
-        <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
+          <text :class="['line-filter-text', selectedLineId === '' ? 'placeholder' : '']">{{ selectedLineLabel }}</text>
-      </view>
+          <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
-      <view class="keyword-box">
+        </view>
-        <input
+        <picker :range="statusLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
-          id="equipment-maintenance-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('equipmentMaintenance.searchPlaceholder')"
+        </picker>
-          placeholder-class="placeholder"
-          confirm-type="search"
-          @confirm="handleSearch"
-        />
       </view>
-      <picker :range="statusLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
+      <view class="filter-row search-row">
-        <view class="status-box">
+        <view class="keyword-wrap">
-          <text class="status-box-text">{{ selectedStatusLabel }}</text>
+          <input
-          <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+            id="equipment-maintenance-keyword-input"
+            v-model="searchKeyword"
+            class="keyword-input"
+            type="text"
+            :placeholder="t('equipmentMaintenance.searchPlaceholder')"
+            placeholder-class="placeholder"
+            confirm-type="search"
+            @confirm="handleSearch"
+          />
         </view>
-      </picker>
+        <view class="icon-filter-btn" @click="resetFilters">
-      <view class="reset-filter-btn" @click="resetFilters">{{ t('functionCommon.reset') }}</view>
+          <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>
 
     <scroll-view
@@ -82,6 +91,110 @@
       <text class="add-icon">+</text>
     </view>
 
+    <uni-popup
+      ref="filterPopupRef"
+      class="equipment-filter-popup"
+      type="right"
+      background-color="transparent"
+      :animation="false"
+    >
+      <view class="filter-drawer">
+        <view class="drawer-header">
+          <text class="drawer-title">{{ t('equipmentMaintenance.moreFilter') }}</text>
+        </view>
+        <scroll-view scroll-y class="drawer-body">
+          <view class="drawer-section">
+            <view class="drawer-section-head">
+              <text class="drawer-section-title">{{ t('equipmentMaintenance.basicInfo') }}</text>
+            </view>
+            <view class="drawer-grid">
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentMaintenance.repairName') }}</text>
+                <input
+                  v-model="repairNameFilter"
+                  class="drawer-input"
+                  type="text"
+                  :placeholder="t('equipmentMaintenance.placeholderRepairName')"
+                />
+              </view>
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentMaintenance.acceptedBy') }}</text>
+                <input
+                  v-model="acceptedByFilter"
+                  class="drawer-input"
+                  type="text"
+                  :placeholder="t('equipmentMaintenance.placeholderAcceptedBy')"
+                />
+              </view>
+            </view>
+          </view>
+
+          <view class="drawer-section">
+            <view class="drawer-section-head">
+              <text class="drawer-section-title">{{ t('equipmentMaintenance.statusFilter') }}</text>
+            </view>
+            <view class="drawer-field drawer-field-wide">
+              <text class="drawer-label">{{ t('equipmentMaintenance.status') }}</text>
+              <picker :range="documentStatusLabels" :value="documentStatusPickerIndex" @change="onDocumentStatusChange">
+                <view class="drawer-picker">
+                  <text :class="['drawer-picker-text', selectedDocumentStatus === '' ? 'placeholder' : '']">
+                    {{ selectedDocumentStatusLabel }}
+                  </text>
+                  <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+                </view>
+              </picker>
+            </view>
+          </view>
+
+          <view class="drawer-section">
+            <view class="drawer-section-head">
+              <text class="drawer-section-title">{{ t('equipmentMaintenance.dateFilter') }}</text>
+            </view>
+            <view class="drawer-field drawer-field-wide">
+              <text class="drawer-label">{{ t('equipmentMaintenance.requireDate') }}</text>
+              <view class="drawer-date">
+                <uni-datetime-picker
+                  v-model="requireDateFilter"
+                  type="daterange"
+                  :clear-icon="true"
+                  :start-placeholder="t('equipmentMaintenance.placeholderRequireStartDate')"
+                  :end-placeholder="t('equipmentMaintenance.placeholderRequireEndDate')"
+                />
+              </view>
+            </view>
+            <view class="drawer-field drawer-field-wide drawer-field-gap">
+              <text class="drawer-label">{{ t('equipmentMaintenance.finishDate') }}</text>
+              <view class="drawer-date">
+                <uni-datetime-picker
+                  v-model="finishDateFilter"
+                  type="daterange"
+                  :clear-icon="true"
+                  :start-placeholder="t('equipmentMaintenance.placeholderFinishStartDate')"
+                  :end-placeholder="t('equipmentMaintenance.placeholderFinishEndDate')"
+                />
+              </view>
+            </view>
+            <view class="drawer-field drawer-field-wide drawer-field-gap">
+              <text class="drawer-label">{{ t('equipmentMaintenance.confirmDate') }}</text>
+              <view class="drawer-date">
+                <uni-datetime-picker
+                  v-model="confirmDateFilter"
+                  type="daterange"
+                  :clear-icon="true"
+                  :start-placeholder="t('equipmentMaintenance.placeholderConfirmStartDate')"
+                  :end-placeholder="t('equipmentMaintenance.placeholderConfirmEndDate')"
+                />
+              </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>
+
     <up-cascader
       :key="lineCascaderKey"
       v-model:show="lineCascaderShow"
@@ -112,9 +225,17 @@ import {
 import { getDeviceLineTree } from '@/api/mes/deviceLine'
 
 const { t } = useI18n()
+const DEFAULT_REPAIR_STATUS = '0'
 const searchKeyword = ref('')
-const selectedStatus = ref('')
+const selectedStatus = ref(DEFAULT_REPAIR_STATUS)
 const selectedLineId = ref('')
+const repairNameFilter = ref('')
+const acceptedByFilter = ref('')
+const selectedDocumentStatus = ref('')
+const requireDateFilter = ref([])
+const finishDateFilter = ref([])
+const confirmDateFilter = ref([])
+const filterPopupRef = ref(null)
 const lineTree = ref([])
 const lineCascaderShow = ref(false)
 const lineCascaderValue = ref([])
@@ -149,6 +270,22 @@ const selectedStatusLabel = computed(() => {
   return current ? current.label : t('functionCommon.all')
 })
 
+const documentStatusOptions = computed(() => [
+  { label: t('functionCommon.all'), value: '' },
+  { label: t('equipmentMaintenance.statusDocumentPending'), value: '0' },
+  { label: t('equipmentMaintenance.statusDocumentFinished'), value: '1' }
+])
+
+const documentStatusLabels = computed(() => documentStatusOptions.value.map((item) => item.label))
+const documentStatusPickerIndex = computed(() => {
+  const index = documentStatusOptions.value.findIndex((item) => item.value === selectedDocumentStatus.value)
+  return index >= 0 ? index : 0
+})
+const selectedDocumentStatusLabel = computed(() => {
+  const current = documentStatusOptions.value.find((item) => item.value === selectedDocumentStatus.value)
+  return current ? current.label : t('functionCommon.all')
+})
+
 const selectedLineLabel = computed(() => {
   if (selectedLineId.value === '') return t('equipmentMaintenance.lineFilter')
   const found = lineOptions.value.find(item => String(item.id) === String(selectedLineId.value))
@@ -244,15 +381,26 @@ async function fetchList(reset) {
 
   try {
     const keyword = searchKeyword.value.trim()
-    const machineryId = parseMachineryIdKeyword(keyword)
+    const repairName = repairNameFilter.value.trim()
+    const acceptedBy = acceptedByFilter.value.trim()
+    const requireDateRange = Array.isArray(requireDateFilter.value) ? requireDateFilter.value : []
+    const finishDateRange = Array.isArray(finishDateFilter.value) ? finishDateFilter.value : []
+    const confirmDateRange = Array.isArray(confirmDateFilter.value) ? confirmDateFilter.value : []
     const params = {
       pageNo: pageNo.value,
       pageSize: pageSize.value,
-      repairCode: machineryId ? undefined : keyword || undefined,
+      keyword: keyword || undefined,
-      machineryCode: machineryId ? undefined : keyword || undefined,
+      repairName: repairName || undefined,
-      machineryId: machineryId || undefined,
       deviceLine: selectedLineId.value === '' ? undefined : selectedLineId.value,
-      repairStatus: selectedStatus.value === '' ? undefined : selectedStatus.value
+      repairStatus: selectedStatus.value === '' ? undefined : selectedStatus.value,
+      acceptedBy: acceptedBy || undefined,
+      status: selectedDocumentStatus.value === '' ? undefined : selectedDocumentStatus.value,
+      'requireDate[0]': formatQueryDate(requireDateRange[0], false),
+      'requireDate[1]': formatQueryDate(requireDateRange[1], true),
+      'finishDate[0]': formatQueryDate(finishDateRange[0], false),
+      'finishDate[1]': formatQueryDate(finishDateRange[1], true),
+      'confirmDate[0]': formatQueryDate(confirmDateRange[0], false),
+      'confirmDate[1]': formatQueryDate(confirmDateRange[1], true)
     }
     const res = await getDvRepairPage(params)
     const root = res && res.data !== undefined ? res.data : res
@@ -268,9 +416,13 @@ async function fetchList(reset) {
   }
 }
 
-function parseMachineryIdKeyword(keyword) {
+
-  const match = String(keyword || '').trim().match(/-(\d+)$/)
+function formatQueryDate(value, isEnd) {
-  return match ? Number(match[1]) : undefined
+  if (!value) return undefined
+  const text = String(value).trim()
+  if (!text) return undefined
+  if (text.includes(':')) return text
+  return text + ' ' + (isEnd ? '23:59:59' : '00:00:00')
 }
 
 function onFetchResult(result) {
@@ -325,6 +477,19 @@ function handleSearch() {
   fetchList(true)
 }
 
+function openFilterDrawer() {
+  filterPopupRef.value?.open()
+}
+
+function closeFilterDrawer() {
+  filterPopupRef.value?.close()
+}
+
+async function confirmFilterDrawer() {
+  closeFilterDrawer()
+  await fetchList(true)
+}
+
 function openLineCascader() {
   lineCascaderShow.value = true
 }
@@ -339,11 +504,18 @@ function onLineCascaderConfirm(values) {
 
 async function resetFilters() {
   searchKeyword.value = ''
-  selectedStatus.value = ''
+  selectedStatus.value = DEFAULT_REPAIR_STATUS
   selectedLineId.value = ''
+  repairNameFilter.value = ''
+  acceptedByFilter.value = ''
+  selectedDocumentStatus.value = ''
+  requireDateFilter.value = []
+  finishDateFilter.value = []
+  confirmDateFilter.value = []
   lineCascaderValue.value = []
   lineCascaderShow.value = false
   lineCascaderKey.value += 1
+  closeFilterDrawer()
   activateKeywordFocus()
   await fetchList(true)
 }
@@ -354,6 +526,11 @@ function onStatusFilterChange(event) {
   fetchList(true)
 }
 
+function onDocumentStatusChange(event) {
+  const index = Number(event?.detail?.value || 0)
+  selectedDocumentStatus.value = documentStatusOptions.value[index]?.value ?? ''
+}
+
 function canEdit(item) {
   return !isProcessedRepair(item?.repairStatus)
 }
@@ -501,81 +678,285 @@ function textValue(value) {
 }
 
 .filter-bar {
-  display: grid;
+  padding: 18rpx 14rpx 20rpx;
-  grid-template-columns: minmax(0, 1fr) 150rpx 110rpx;
+  background: #f3f4f6;
+}
+
+.filter-row {
+  display: flex;
   align-items: center;
-  gap: 14rpx;
+  gap: 18rpx;
-  padding: 18rpx 4rpx 16rpx;
+}
+
+.search-row {
+  margin-top: 18rpx;
+}
+
+.quick-row > picker {
+  min-width: 0;
+  flex: 1;
 }
 
+.keyword-wrap,
+.status-filter,
 .line-filter,
-.keyword-box,
+.icon-filter-btn {
-.status-box,
-.reset-filter-btn {
   height: 66rpx;
-  background: #ffffff;
   border: 1rpx solid #d9dde5;
+  background: #ffffff;
   box-sizing: border-box;
+}
+
+.keyword-wrap {
+  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-filter,
 .line-filter {
-  grid-column: 1 / -1;
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 0 18rpx;
+  padding: 0 18rpx 0 26rpx;
-  border-radius: 8rpx;
+}
+
+.icon-filter-btn {
+  width: 66rpx;
+  flex: 0 0 66rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: transparent;
+  background: transparent;
 }
 
+.status-filter-text,
 .line-filter-text {
-  font-size: 26rpx;
+  min-width: 0rpx;
-  color: #374151;
+  flex: 1;
-  max-width: 85%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 26rpx;
+  color: #374151;
 }
 
-.line-filter-text.placeholder {
+.status-filter-text.placeholder,
+.line-filter-text.placeholder,
+.placeholder {
   color: #a8adb7;
 }
 
-.keyword-box {
+.filter-drawer {
-  padding: 0 20rpx;
+  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;
 }
 
-.keyword-input {
+:deep(.equipment-filter-popup.right .uni-popup__content-transition) {
+  transform: none !important;
+}
+
+.drawer-header {
+  height: 104rpx;
+  padding: 18rpx 34rpx 0;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.drawer-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+
+.drawer-section-title {
+  font-size: 32rpx;
+  line-height: 1.3;
+  color: #1f2937;
+  font-weight: 700;
+}
+
+.drawer-grid {
+  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-field-gap {
+  margin-top: 22rpx;
+}
+
+.drawer-label {
+  display: block;
+  margin-bottom: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.3;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.drawer-input,
+.drawer-picker,
+.drawer-date {
   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: #374151;
+  color: #111827;
+  text-align: center;
 }
 
-.status-box {
+.drawer-picker {
-  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0 18rpx;
+  gap: 8rpx;
 }
 
-.status-box-text,
+.drawer-picker-text {
-.placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 26rpx;
+  color: #111827;
+  text-align: center;
 }
 
-.status-box-text {
+.drawer-picker-text.placeholder {
-  color: #374151;
+  color: #9ca3af;
 }
 
-.placeholder {
+.drawer-date {
-  color: #a8adb7;
+  display: flex;
+  align-items: center;
+  padding: 0 12rpx;
+}
+
+.drawer-date :deep(.uni-date),
+.drawer-date :deep(.uni-date-editor),
+.drawer-date :deep(.uni-date-editor--x),
+.drawer-date :deep(.uni-date-x) {
+  width: 100%;
+}
+
+.drawer-date :deep(.uni-date-editor),
+.drawer-date :deep(.uni-date-editor--x),
+.drawer-date :deep(.uni-date-x) {
+  min-height: 74rpx;
+}
+
+.drawer-date :deep(.uni-date-editor--x),
+.drawer-date :deep(.uni-date-x) {
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.drawer-date :deep(.uni-date-range) {
+  display: flex;
+  align-items: center;
 }
 
-.reset-filter-btn {
+.drawer-date :deep(.uni-date__x-input) {
+  text-align: center;
+  font-size: 26rpx;
+  color: #111827;
+}
+
+.drawer-actions {
+  height: 126rpx;
+  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: 24rpx;
+  font-size: 28rpx;
-  color: #4b5563;
+  font-weight: 600;
-  border-radius: 8rpx;
+  border: 2rpx solid #174b78;
-  cursor: pointer;
+  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;
 }
 
 .list-scroll {