From d2ce549c2a95779b78c40528962f289d22503fdf Mon Sep 17 00:00:00 2001 From: hwj Date: Tue, 30 Jun 2026 14:05:26 +0800 Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E8=AE=BE=E5=A4=87=E7=BB=B4?= =?UTF-8?q?=E4=BF=AE/=E7=82=B9=E6=A3=80=E4=BB=BB=E5=8A=A1/=E7=82=B9?= =?UTF-8?q?=E6=A3=80=E8=AE=B0=E5=BD=95-=E7=AD=9B=E9=80=89=E6=A1=86?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/equipmentInspectionRecord/index.vue | 35 +++-- .../pages/equipmentInspectionTasks/index.vue | 123 +++++++++--------- .../pages/equipmentMaintenance/index.vue | 116 +++++++---------- 3 files changed, 127 insertions(+), 147 deletions(-) diff --git a/src/pages_function/pages/equipmentInspectionRecord/index.vue b/src/pages_function/pages/equipmentInspectionRecord/index.vue index c77c743..fa63a6c 100644 --- a/src/pages_function/pages/equipmentInspectionRecord/index.vue +++ b/src/pages_function/pages/equipmentInspectionRecord/index.vue @@ -90,22 +90,19 @@ {{ t('equipmentInspectionRecord.moreFilter') }} - - - {{ t('equipmentInspectionRecord.filterScope') }} - - + + {{ t('equipmentInspectionRecord.taskType') }} - + {{ currentTaskTypeLabel }} - + {{ t('equipmentInspectionRecord.jobResult') }} - + {{ currentJobResultLabel }} @@ -197,8 +194,8 @@ const jobStatusOptions = computed(() => { .map((item) => ({ label: item.label, value: String(item.value) })) }) const jobResultOptions = computed(() => [ - { label: t('equipmentInspectionRecord.jobResultOk'), value: 'OK' }, - { label: t('equipmentInspectionRecord.jobResultNg'), value: 'NG' } + { label: t('equipmentInspectionRecord.jobResultOk'), value: '1' }, + { label: t('equipmentInspectionRecord.jobResultNg'), value: '2' } ]) const taskTypeLabels = computed(() => taskTypeOptions.value.map((item) => item.label)) @@ -584,15 +581,15 @@ function formatDateTime(value) { .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-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-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; 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; } +.drawer-section { margin-bottom: 18rpx; padding: 8rpx 28rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; } +.drawer-fields { display: flex; flex-direction: column; } +.drawer-field { min-width: 0; min-height: 98rpx; display: flex; align-items: center; gap: 20rpx; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; } +.drawer-field:last-child { border-bottom: 0; } +.drawer-field-wide { grid-column: auto; } +.drawer-label { width: 160rpx; flex: 0 0 160rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; } +.drawer-picker-host { min-width: 0; flex: 1; display: block; } +.drawer-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 0 18rpx; gap: 8rpx; } +.drawer-picker-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: right; } .drawer-picker-text.placeholder { color: #9ca3af; } .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: 28rpx; font-weight: 600; border: 2rpx solid #174b78; box-sizing: border-box; } diff --git a/src/pages_function/pages/equipmentInspectionTasks/index.vue b/src/pages_function/pages/equipmentInspectionTasks/index.vue index 64dfa73..87989b7 100644 --- a/src/pages_function/pages/equipmentInspectionTasks/index.vue +++ b/src/pages_function/pages/equipmentInspectionTasks/index.vue @@ -85,37 +85,24 @@ {{ t('equipmentInspectionTasks.moreFilter') }} - - - {{ t('equipmentInspectionTasks.filterScope') }} - - + + {{ t('equipmentInspectionTasks.projectFormName') }} - - {{ selectedPlanLabel }} - - - - - {{ option.name }} - + + + {{ selectedPlanLabel }} + - {{ t('equipmentInspectionTasks.noPlanData') }} - + - + {{ t('equipmentInspectionTasks.deviceList') }} - - {{ selectedDeviceLabel }} - - - - - {{ option.label }} - + + + {{ selectedDeviceLabel }} + - {{ t('equipmentInspectionTasks.noDeviceData') }} - + @@ -160,8 +147,6 @@ const selectedTaskType = ref('') const selectedPlanIds = ref([]) const selectedDeviceIds = ref([]) const planOptions = ref([]) -const planPanelOpen = ref(false) -const devicePanelOpen = ref(false) const filterPopupRef = ref(null) const list = ref([]) const loading = ref(false) @@ -226,7 +211,22 @@ const drawerDeviceOptions = computed(() => deviceOptions.value.map((item) => ({ const selectedPlanLabel = computed(() => formatSelectedSummary(selectedPlanIds.value, drawerPlanOptions.value, 'name', t('equipmentInspectionTasks.placeholderProjectForm'))) const selectedDeviceLabel = computed(() => formatSelectedSummary(selectedDeviceIds.value, drawerDeviceOptions.value, 'label', t('equipmentInspectionTasks.placeholderDeviceList'))) - +const planPickerOptions = computed(() => [ + { id: '', label: t('functionCommon.all') }, + ...drawerPlanOptions.value.map((item) => ({ + id: item.id, + label: formatPickerOptionLabel(selectedPlanIds.value, item.id, item.name) + })) +]) +const devicePickerOptions = computed(() => [ + { id: '', label: t('functionCommon.all') }, + ...drawerDeviceOptions.value.map((item) => ({ + id: item.id, + label: formatPickerOptionLabel(selectedDeviceIds.value, item.id, item.label) + })) +]) +const planPickerIndex = computed(() => getPickerIndex(planPickerOptions.value, selectedPlanIds.value)) +const devicePickerIndex = computed(() => getPickerIndex(devicePickerOptions.value, selectedDeviceIds.value)) onLoad(async () => { activateKeywordFocus() await Promise.all([loadLineTree(), ensurePlanOptionsLoaded(), ensureDeviceOptionsLoaded()]) @@ -411,28 +411,26 @@ function closeFilterDrawer() { } async function confirmFilterDrawer() { - planPanelOpen.value = false - devicePanelOpen.value = false closeFilterDrawer() await fetchList(true) } -function togglePlanPanel() { - planPanelOpen.value = !planPanelOpen.value - devicePanelOpen.value = false +function onPlanPickerChange(event) { + handleMultiPickerChange(planPickerOptions.value, selectedPlanIds, event) } -function toggleDevicePanel() { - devicePanelOpen.value = !devicePanelOpen.value - planPanelOpen.value = false +function onDevicePickerChange(event) { + handleMultiPickerChange(devicePickerOptions.value, selectedDeviceIds, event) } -function togglePlanOption(option) { - toggleStringSelection(selectedPlanIds, option?.id) -} - -function toggleDeviceOption(option) { - toggleStringSelection(selectedDeviceIds, option?.id) +function handleMultiPickerChange(options, targetRef, event) { + const index = Number(event?.detail?.value || 0) + const option = options[index] + if (!option || option.id === '') { + targetRef.value = [] + return + } + toggleStringSelection(targetRef, option.id) } function toggleStringSelection(targetRef, value) { @@ -442,6 +440,18 @@ function toggleStringSelection(targetRef, value) { targetRef.value = current.includes(id) ? current.filter((item) => item !== id) : [...current, id] } +function getPickerIndex(options, selectedIds) { + const selected = Array.isArray(selectedIds) ? selectedIds.map((item) => String(item)) : [] + if (!selected.length) return 0 + const index = options.findIndex((item) => selected.includes(String(item.id))) + return index >= 0 ? index : 0 +} + +function formatPickerOptionLabel(selectedIds, id, label) { + const selected = (Array.isArray(selectedIds) ? selectedIds : []).map((item) => String(item)) + return `${selected.includes(String(id)) ? '[x]' : '[ ]'} ${label}` +} + function formatSelectedSummary(ids, options, labelKey, placeholder) { const selected = Array.isArray(ids) ? ids : [] if (!selected.length) return placeholder @@ -471,8 +481,6 @@ async function resetFilters() { selectedTaskType.value = '' selectedPlanIds.value = [] selectedDeviceIds.value = [] - planPanelOpen.value = false - devicePanelOpen.value = false closeFilterDrawer() resetLineFilter() activateKeywordFocus() @@ -626,23 +634,16 @@ function formatDate(value) { .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-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-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; 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; } +.drawer-section { margin-bottom: 18rpx; padding: 8rpx 28rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; } +.drawer-fields { display: flex; flex-direction: column; } +.drawer-field { min-width: 0; min-height: 98rpx; display: flex; align-items: center; gap: 20rpx; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; } +.drawer-field:last-child { border-bottom: 0; } +.drawer-field-wide { grid-column: auto; } +.drawer-label { width: 160rpx; flex: 0 0 160rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; } +.drawer-picker-host { min-width: 0; flex: 1; display: block; } +.drawer-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 0 18rpx; gap: 8rpx; } +.drawer-picker-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: right; } .drawer-picker-text.placeholder { color: #9ca3af; } -.drawer-option-panel { max-height: 420rpx; margin-top: 12rpx; border-radius: 12rpx; background: #f7f8fb; overflow: hidden; } -.drawer-option-item { min-height: 72rpx; padding: 0 24rpx; display: flex; align-items: center; gap: 12rpx; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; } -.drawer-option-item:last-child { border-bottom: 0; } -.drawer-option-item.active { background: rgba(23, 75, 120, 0.1); } -.drawer-option-item.active .drawer-option-text { 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-empty { padding: 28rpx 0; text-align: center; font-size: 26rpx; color: #9ca3af; } .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: 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; } diff --git a/src/pages_function/pages/equipmentMaintenance/index.vue b/src/pages_function/pages/equipmentMaintenance/index.vue index 1fb22d0..4936021 100644 --- a/src/pages_function/pages/equipmentMaintenance/index.vue +++ b/src/pages_function/pages/equipmentMaintenance/index.vue @@ -103,39 +103,28 @@ {{ t('equipmentMaintenance.moreFilter') }} - - - {{ t('equipmentMaintenance.basicInfo') }} + + + {{ t('equipmentMaintenance.repairName') }} + - - - {{ t('equipmentMaintenance.repairName') }} - - - - {{ t('equipmentMaintenance.acceptedBy') }} - - + + {{ t('equipmentMaintenance.acceptedBy') }} + - - - - - {{ t('equipmentMaintenance.statusFilter') }} - - + {{ t('equipmentMaintenance.status') }} - + {{ selectedDocumentStatusLabel }} @@ -144,13 +133,7 @@ - - - - - {{ t('equipmentMaintenance.dateFilter') }} - - + {{ t('equipmentMaintenance.requireDate') }} - + {{ t('equipmentMaintenance.finishDate') }} - + {{ t('equipmentMaintenance.confirmDate') }}